[Fixed] React routes not working until page refresh

Issue

import React, { useEffect, useState } from 'react';
import { Container, AppBar, Typography, Grow, Grid, useTheme } from '@material-ui/core';
import { useDispatch } from 'react-redux';
import { BrowserRouter, Router, Route, Switch} from 'react-router-dom'

import { getPosts } from './actions/posts'
import Form from './components/Form/Form'
import useStyles from './styles';
import Navbar from './components/Navbar/Navbar'
import Home from './components/Home'
import Auth from './components/Auth'

const App = () => {

 
  return (
    <Container maxwidh='lg'>
      <Navbar />
      <Grow in>
        <Container>
        <div className="content">
        <BrowserRouter>
          <Switch> 
          <Route path="/" exact component={Home} />
          <Route path="/form" exact component={Form} />
          <Route path="/auth" exact component={Auth} />
          </Switch>
        </BrowserRouter>
      </div>
        </Container>
      </Grow>
    </Container>
   );
}



export default App;

This is the Nav bar and above is the routes. I’m using express for back end and am not sure if that is playing a roll or not.

import React from 'react';
import { AppBar, Typography } from '@material-ui/core';
import { Link } from 'react-router-dom';
import {BrowserRouter as Router} from "react-router-dom";
import { Toolbar, Avatar, Button } from '@material-ui/core';

import store from '../../images/store.jpg'
import useStyles from './styles';

const Navbar = () => {

    const classes = useStyles();

    return ( 
        <AppBar className = {classes.appBar} position='static' color='inheret'>
            <div className= {classes.brandContainer}>
                <Typography to='/' className = {classes.heading} variant='h2' align='center'>Store</Typography>
                <img className = {classes.image} src={store} alt="store" height='220' width='300' align='center' />
            </div>
            <div >
                <Router>
                <Button component={Link} to="/" variant="contained" color="primary">Home</Button>
                <Button component={Link} to="/form" variant="contained" color="primary">Create Store</Button>
                <Button component={Link} to="/auth" variant="contained" color="primary">Sign Up</Button>
                <Button component={Link} to="/login" variant="contained" color="primary">Login</Button>
                </Router>
            </div>
        
      </AppBar>
     );
}
 
export default Navbar;

When I click the on the links in the browser, the url changes to the correct route but nothing happens to the page. When I refresh the after clicking the correct page loads. It does not work without refreshing though. Seems simple but not sure what is wrong.

Solution

It is not working because Navbar is outside BrowserRouter. Move BrowserRouter in your App component and Remove Router from Navbar:

 return (

  <Container maxwidh='lg'>
    <BrowserRouter>
      <Navbar />
      <Grow in>
        <Container>
          <div className="content">
           <Switch> 
             <Route path="/" exact component={Home} />
             <Route path="/form" exact component={Form} />
             <Route path="/auth" exact component={Auth} />
           </Switch>
          </div>
        </Container>
      </Grow>
   </BrowserRouter>
 </Container>

   );