React Router help for Navbar component

JavaScript
1

I am wondering how to use React Router when the Navbar is a separate component.

index.js

import React from 'react'
import ReactDOM from 'react-dom'
// Styles
import CssBaseline from '@material-ui/core/CssBaseline'
import { ThemeProvider } from '@material-ui/styles'
import theme from './theme'
// Components
import App from './App'

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <CssBaseline />
    <App />
  </ThemeProvider>,
  document.getElementById('root')
)

App.js

import React from 'react'
// Styling
import Container from '@material-ui/core/Container'
import Button from '@material-ui/core/Button'
//Components
import Hero from './components/Hero'
import Menubar from './components/Menubar'

function App() {
  return (
    <React.Fragment>
      <Container maxWidth='lg'>
        <Menubar />
      </Container>
      <Hero />
      <Container maxWidth='lg'>
        <h1>My new web site using Material UI</h1>
        <Button variant='contained' color='primary'>
          Hello
        </Button>
      </Container>
    </React.Fragment>
  )
}

export default App

I am relatively new to React and I cannot seem to figure this part out. The tutorials I have found are not very helpful.

3

Actually, it ended up begin earlier than that. First, I decided to use @reach/router instead and posted a message on their discord forum. All I have to do was wrap the nav only with the <Router />.

export default class App extends Component {
  render() {
    return (
      <React.Fragment>
        <Menubar />
        <Router>
          <Home path='/' />
          <Projects path='/projects' />
        </Router>
        <Footer />
      </React.Fragment>
    )
  }
}

Thanks.

4

This may help you