React router dom not working with Link, but refreshing the page loads the component

Question

I've got a create-react-app with a couple of routes. Every now and then as I change branches etc, I notice routing doesn't work. I reckon the only time it has worked its because of caching.

Below are my routes, I've replaced the blog route with a simple p tag for simplicity as I began to think it was relating to the component I was linking to.

App.tsx

const history = createBrowserHistory();
...
<Router history={history} data-test="component-app">
   <Switch>
      <Route exact path="/" component={Main} />
      <Route path="/blog">
         <p>test</p>
      </Route>
   </Switch
</Router>

Main.tsx

import React from "react";
import { Link } from "react-router-dom";

export const Main = () => {

    return (
        <Link to="/blog">Blog</Link>
    )
}

Here's what happens:

• Click on Blog link in Main = route in browser changes to localhost:9600/blog BUT there's no content, just a white page
• Refresh the page whilst on localhost:9600/blog and you get the <p>test</p> part

But why isn't it showing test as soon as you click on the link?

Versions I'm using:

• react-router-dom: "^5.2.0"
• react-scripts: "4.0.1"
• react: "^17.0.1"
• history: "^5.0.0"

Any ideas?

Answer 1

For React-Router-Dom to work perfectly fine, make sure your entire application is wrapped with BrowserRouter which is best in your indexJS just like that below, a sample of the indexJS file

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
    <React.StrictMode>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </React.StrictMode>,
    document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();