React で Bootstrap の Navbar と react-router-dom を同時に使う方法

Ⅰ. はじめに

タイトルの通り「React で Bootstrap の Navbar と react-router-dom を同時に使う方法」です。

Ⅱ. やり方

1. 必要なライブラリをインストールする

npm i -D react-bootstrap bootstrap react-router-dom
npm i -D react-router-bootstrap

2. ファイルを編集する

src/App.js

import React from 'react'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import MyNavbar from './MyNavbar'
import { Container } from 'react-bootstrap'

const Page001 = () => <p>Page001</p>
const Page002 = () => <p>Page002</p>

const App = () => {
  return (
    <BrowserRouter>
      <MyNavbar />
      <Container>
        <Switch>
          <Route exact path='/page001' component={Page001} />
          <Route exact path='/page002' component={Page002} />
        </Switch>
      </Container>
    </BrowserRouter>
  )
}

export default App

src/MyNavbar.js

import React from 'react'
import { LinkContainer } from 'react-router-bootstrap'
import { Navbar, Nav } from 'react-bootstrap'

const MyNavbar = () => {
  return (
    <Navbar bg='dark' variant='dark'>
      <LinkContainer to='/'>
        <Navbar.Brand>Navbar</Navbar.Brand>
      </LinkContainer>
      <Nav className='mr-auto'>
        <LinkContainer to='/page001'>
          <Nav.Link>Page001</Nav.Link>
        </LinkContainer>
        <LinkContainer to='/page002'>
          <Nav.Link>Page002</Nav.Link>
        </LinkContainer>
      </Nav>
    </Navbar>
  )
}

export default MyNavbar

実行結果

参考

https://react-bootstrap.github.io/components/navbar/
https://github.com/ReactTraining/react-router
https://github.com/react-bootstrap/react-router-bootstrap