Url change but not rendering component React Router

Question

Hi i am trying to change the route of my website to go to Contact, when the menu is clicked. Whenever i press the button for the homepage which is "Forside", the routing works perfectly.

But as soon as i press the button for the contact which is "Kontakt", the url changes and no component renders. But if i refresh the page, it shows up..

Any ideas what is wrong with my code, or any way to fix it? All help will be appreciated thanks.

My App.js

import React from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import Forside from './forside';
import Kontakt from './Kontakt';
import Header from './Header'

const App = () => {
return(
<Router>
<div>
<Header/>
<Switch>
<Route exact path="/" component={Forside}/>
<Route path="/kontakt" component={Kontakt}/>
</Switch>
</div>
</Router>
)
}

export default App

And this is where i link to the different routes.

import React, { useState } from 'react';
import './header.css'
import { makeStyles } from '@material-ui/core/styles';
import BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
import ContactMailIcon from '@material-ui/icons/ContactMail';
import LocationOnIcon from '@material-ui/icons/LocationOn';
import {Link} from 'react-router-dom';

const useStyles = makeStyles({
  root: {
    width: 500,
  },
});

const Header = () => {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);

return(
<div className="hed">
<h1 className="logo"><span>IT</span> ARBEJDE.DK</h1>

<BottomNavigation
  value={value}
  className="nav"
  onChange={(event, newValue) => {
    setValue(newValue);
  }}
  showLabels
  className={classes.root}
>
  <Link to="/">
  <BottomNavigationAction label="Søg job" icon={<LocationOnIcon />} />
  </Link>

<Link to="/kontakt">
<BottomNavigationAction label="Kontakt" icon={<ContactMailIcon/>} />
</Link>
  

</BottomNavigation>
</div>     
)
}

export default Header

Answer 1

add exact to it to your route

 <Route exact path="/kontakt" component={Kontakt}/>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

Since i didn't get a answer, i have figured it out on my own. So i would just like to share the solution, for other people who maybe are expecting the same bug.

I fixed the problem, by restructuring my code. I placed my router inside the index.js component like this:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {BrowserRouter as Router} from 'react-router-dom';

ReactDOM.render(

  <React.StrictMode>
       <Router>
           <App/>
       </Router>
  </React.StrictMode>,

  
  document.getElementById('root')
);

Then placed the Header code inside my App.js, instead of having the Component rendering.

So i refactored the code like this:

import React from 'react';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import Kontakt from './Kontakt';
import Forside from './forside';
import { makeStyles } from '@material-ui/core/styles';
import BottomNavigation from '@material-ui/core/BottomNavigation';
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
import ContactMailIcon from '@material-ui/icons/ContactMail';
import LocationOnIcon from '@material-ui/icons/LocationOn';
import {Link} from 'react-router-dom';
import './header.css'


const useStyles = makeStyles({
    root: {
      width: 500,
    },
  });


const App = () => {
    const classes = useStyles();
    const [value, setValue] = React.useState(0);

return(
<div>
<div className="header-container">
<h1 className="logo"><span>IT</span> ARBEJDE.DK</h1>
<BottomNavigation
  value={value}
  className="nav"
  onChange={(event, newValue) => {
    setValue(newValue);
  }}
  showLabels
  className={classes.root}
>
  <BottomNavigationAction label="Søg job" component={Link} to="/" icon={<LocationOnIcon />} />
  <BottomNavigationAction label="Kontakt" component={Link} to="/kontakt" icon={<ContactMailIcon/>} />
</BottomNavigation>
</div>     

<Switch>
<Route exact path="/" component={Forside}/>
<Route exact path="/kontakt" component={Kontakt}/>
</Switch>
</div>
)
}

export default App