React Router changes route but does not render the component

Question

I'm having an issue where changing the route in my react app does not render the components. After hitting refresh the components render as expected. Is this just a development runtime thing that won't appear in production or am I missing something here?

//all  required imports are correctly imported

export default function App() {
    return pug`
            Router
                    Switch
                            Route(path="/" exact component=Home)

                            Route(path="/character" exact component=Character)

                            Route(path="/story" exact component=Story)

                            Route(path="/pay" exact component=Payment)
    `
}

Using a Link component to change the route does not render the new component. Changing the route in the address bar directly does though. I'm guessing this is because the browser refreshes the page anyways.

Answer 1

index.js

 import { BrowserRouter } from 'react-router-dom'; const defaultRender = () => { ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('root') ); }; defaultRender();

App.js

 import React from 'react'; import { Route, Switch } from 'react-router-dom'; import {Page1, Page2} from './pages'; const App = () => { return ( <div className="App"> <Switch> <Route exact path="/page1" component={Page1} /> <Route exact path="/page2" component={Page2} /> </Switch> </div> ); } export default App;

Answer 2

Found the problem. In index.js I had React.StrictMode around my application. Removing it fixed the issue. I'm not sure exactly why that worked though.