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?

Does this answer your question? [React Router work on reload, but not when clicking on a link](https://stackoverflow.com/questions/44356360/react-router-work-on-reload-but-not-when-clicking-on-a-link) — GalAbra, Dec 06 '20 at 17:46

score 2 · Accepted Answer · answered Dec 06 '20 at 17:54

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();

Adding BrowserRouter will make you render a component in a route directly. — Qudusayo, Dec 06 '20 at 18:06

score 0 · Answer 2 · answered Dec 06 '20 at 17:58

Usually when I want to render some JSX inside a ‘Route’ and I don’t want to create a different component I use the ‘render’ prop that receives a function and should return the JSX you want to be rendered.

Try this:

<Route path=“/blog” render={() => <p>test</p>} />

score 0 · Answer 3 · answered Dec 06 '20 at 18:42

Changing Router to BrowserRouter in App.js worked!

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
...
return (
    <Router history={history} data-test="component-app">
      <Switch>
        <Route exact path="/">
          <Main />
        </Route>
        <Route path="/blog">
          <p>test</p>
        </Route>
      </Switch>
    </Router>
  );

Thanks all for your help!

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

3 Answers3