Ⅰ. はじめに
タイトルの通り「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
実行結果