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 5 · 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
I had the exact same problem and changing to `BrowserRouter` solved it. You saved me. I'm really curious why `Router ` cause this weird behaviour and `BrowserRouter `. Any insihgts? — Kid_Learning_C, Jun 25 '21 at 16:56

score 1 · Answer 2 · answered Oct 31 '22 at 00:51

1

What worked for me was installing react-router-dom 5, instead of 5.2.0 I previously had. The command is:

npm install react-router-dom@5

answered Oct 31 '22 at 00:51

Isidora Lazić

11
1

score 0 · Answer 3 · 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 4 · answered Dec 06 '20 at 18:42

0

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!

answered Dec 06 '20 at 18:42

Nats

160
3
20

I had the exact same problem and changing to `BrowserRouter` solved it. You saved me. I'm really curious why `Router ` cause this weird behaviour and `BrowserRouter `. Any insihgts? – Kid_Learning_C Jun 25 '21 at 16:56
This also worked for me ✅ – Clifford Fajardo Oct 18 '21 at 20:44

score 0 · Answer 5 · answered May 18 '22 at 06:15

0

Thanks this worked for me by importing BrowserRouter as Router:

import { BrowserRouter as Router, Route } from 'react-router-dom';

and updating "react-router-dom": "^5.2.0" to "react-router-dom": "^5.3.0"

answered May 18 '22 at 06:15

Prashika Sonule

11
2

score 0 · Answer 6 · answered May 31 '23 at 18:30

0

Thank you so much @isidora-lazić. Your solution worked for me. I had react-router-dom 5.2.0 installed. I faced exactly the same issue. It wasted my whole day. So just do this.

               npm install react-router-dom@5

answered May 31 '23 at 18:30

Archana J

11

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/34478350) – 0xe1λ7r Jun 06 '23 at 10:30

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

6 Answers6