Routes not rendering components when navigating

[jenapidev]

When using navigate or redirect the route changes but doesn't render any component
Router:

 <Router>
     <Login path="/login"/>
      <Redirect
        noThrow
        from="/"
        to="/login"
      />
 </Router>

The component Login only renders if i reload the pahe on the "/login" route
dependencies:
"@reach/router": "^1.3.4",
"@types/react-dom": "^17.0.14",
"bootstrap": "^5.1.3",
"node-sass": "^7.0.1",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-redux": "^7.2.8",
"react-scripts": "5.0.0",
"reactstrap": "^9.0.1",
"redux": "^4.1.2",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.4.1",
"sass": "^1.49.11",
"typescript": "^4.6.3"
"@types/node": "^16.11.26",
"@types/reach__router": "^1.3.10",
"@typescript-eslint/eslint-plugin": "^5.18.0",
"@typescript-eslint/parser": "^5.18.0",
"eslint": "^8.11.0",
"eslint-config-async": "^1.0.1",
"eslint-config-standard": "^16.0.3",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.2.0",
"eslint-plugin-react": "^7.29.4"

[chrisl777]

I'm having the same issue. Currently using React 18.0 and very recent create-react-app project.

[konsumer]

I am also having same issue in vite. Refresh of page loads it.

    "vite": "^2.9.1",
    "@reach/router": "^1.3.4",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"

Downgrading to react/react-dom 17.0.2 seems to workaround it.

Also used [email protected] and it worked (looks like it uses old react-dom shape) like this in vite.config.js:

const { defineConfig } = require('vite')
const react = require('@vitejs/plugin-react')
const { resolve } = require('path')

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '~': resolve(__dirname, './src'),
      react: 'preact/compat',
      'react-dom': 'preact/compat'
    }
  }
})

[romainbessugesmeusy]

Same here, used Create React App today and the navigation on click does not work.

[NEXT3R]

Same issue here, used Create React App, working under windows, using cross-env at npm start

[romainbessugesmeusy]

I discovered that Reach/router and react-router joined forces. I personally decided to switch back to React Router V6 which makes embedded routers work just like they worked within Reach.

[NEXT3R]

@jenapidev @romainbessugesmeusy @chrisl777 @konsumer found a workaround:
for some reason the newest reach-router is incompatible with react v18, downgrade to 17.0.0 and it works like a charm

[mceasyweb]

The problem is in the ReactDOM.render function
in the old version it was
ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') as HTMLElement );
now is
const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( <React.StrictMode> <App /> </React.StrictMode> );
if you use the old way it starts working again, but the borowser reports an Warning
react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

[OllyHodgson]

I've run into the same issue on an app we recently upgraded to React 18. Then, based on @romainbessugesmeusy's comment I looked into React Router v6. This comes from their Reach Router migration guide:

If we were to make a @reach/router v2, it would look pretty much exactly like React Router v6. So, the next version of @reach/router is React Router v6. In other words, there will be no @reach/router v2, because it would be the same as React Router v6.

https://reactrouter.com/docs/en/v6/upgrading/reach

The migration process was relatively smooth for me, albeit with a lot of manual testing. Be aware that some things from Reach Router are missing, e.g. the <Match>, <Location> and <Redirect /> components. Everything is based on hooks, so I had to add a couple of backward-compatibility wrapper components to allow me to migrate some older class-based screens to the new router (and some of these are documented in the guide above).

[ldalves]

I just had the same issue running a React app on Vitejs and it seems when I remove <React.StrictMode> the navigation just works... 🤔

[rahulsharmabhu]

I just had the same issue running a React app on Vitejs and it seems when I remove <React.StrictMode> the navigation just works... 🤔

Woked for me thanks!

[chucksdaniel]

This worked for me too, many thanks

[brianbentancourt]

Acabo de tener el mismo problema al ejecutar una aplicación React en Vitejs y parece que cuando elimino <React.StrictMode>la navegación simplemente funciona...🤔

This worked for me too, thanks!!

[dinesh-hills]

I just had the same issue running a React app on Vitejs and it seems when I remove <React.StrictMode> the navigation just works... 🤔

Yeah Removing StrictMode Fixes the problem. Will there be any issues in the future for not using StrictMode?

[ldalves]

Yeah Removing StrictMode Fixes the problem. Will there be any issues in the future for not using StrictMode?

"StrictMode is a tool for highlighting potential problems in an application." - So I assume this is good to have. :)

https://reactjs.org/docs/strict-mode.html

[Gechrist]

I have the same issue. Neither navigate or Link render the page and removing strict mode did not fix it.

[y1n0]

"StrictMode is a tool for highlighting potential problems in an application." - So I assume this is good to have. :)

lol and now that it highlighted a problem, you will remove it and act like a problem does not exist.

(it worked for me btw)

[jndietz]

We're using React 18.2 and removing StrictMode didn't have an effect. Using navigate(-1) will change the route but the component doesn't render.

[nishamvp]

I just had the same issue running a React app on Vitejs and it seems when I remove <React.StrictMode> the navigation just works... 🤔

This works for me..thanks :-)

[hudaalii]

I had a similar issue in which the routing would change the url but had no effect on the page view. My initial code was:
`function App() {
return (

  <div className="App">
    <Router>
    <Navbar/>
      <Routes>
          <Route path="/" component={<Home />} />
          <Route path="/login" component={<Login />} />
          <Route path="/dashboard" component={<Dashboard />} />    
      </Routes>
    </Router>
</div>

);
}`

I figured when I use 'element' instead of 'component', it works. Below is the updated code:

`function App() {
return (

  <div className="App">
    <Router>
    <Navbar/>
      <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/login" element={<Login />} />
          <Route path="/dashboard" element={<Dashboard />} />    
      </Routes>
    </Router>
</div>

);
}`

[Anurag-kuswaha]

@Gechrist , is your issue resolved, I am also facing the same issue and none of the above solutions works for me.

[Gechrist]

@Anurag-kuswaha, it was an issue on my end that was causing the problem. It had nothing to do with react-router.

[Anurag-kuswaha]

@Anurag-kuswaha, it was an issue on my end that was causing the problem. It had nothing to do with react-router.

Thanks for the reply, @Gechrist ,
I am also facing the same issue where our site URL updation is working using useNavigate but the route is not rendering the new page, we have tried multiple solutions but none of them worked.

and this issue is happening only on the production build and working fine on the development

in our project we have used this version:

"react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-router-dom": "^6.9.0",

please let me know if you have faced this type of issue already or have any idea how can we resolve this issue. 😃

[FarhanSulaiman]

Hi @Anurag-kuswaha
i am facing same issue and it is only with production build can you help on this

[Anurag-kuswaha]

Hi @Anurag-kuswaha i am facing same issue and it is only with production build can you help on this

hey @FarhanSulaiman , we haven't got the solution yet and we are still looking into the issue, will let you know if we find anything.

and as far as we found it looks more like a package issue, can you please let me know, what are all the packages that you have used in your project?

[FarhanSulaiman]

Hi @Anurag-kuswaha ,
I am using these packages

"@types/react": "^18.0.17",
 "@types/react-dom": "^18.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
 "react-router-dom": "^6.3.0",

[Anurag-kuswaha]

Hi @Anurag-kuswaha , I am using these packages

"@types/react": "^18.0.17",
 "@types/react-dom": "^18.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
 "react-router-dom": "^6.3.0",

thanks @FarhanSulaiman for sharing the package version, it looks issue is because of react, react-dom or react-router-dom only, please let us know if you finds any solution

[rajuchowdary]

Hi @Anurag-kuswaha

Facing the same issue from last 2 days.

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0"

[Anurag-kuswaha]

hi @rajuchowdary , @FarhanSulaiman ,
using the 6.11.2 version of react-router-dom worked for me.
"react-router-dom": "6.11.2",

this issue is caused because of recent changes in the react-router-dom package file which created this issue.
you can find more details over here -> remix-run/react-router#10579

[rajuchowdary]

@Anurag-kuswaha

Still its not working for me

using this versions

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router": "^6.3.0",
"react-router-dom": "6.11.2"

[Anurag-kuswaha]

@Anurag-kuswaha

Still its not working for me

using this versions

"react": "^18.2.0", "react-dom": "^18.2.0", "react-router": "^6.3.0", "react-router-dom": "6.11.2"

remove the react-router": "^6.3.0",

1. delete the entire node modules, build file, package-lock.json file.
2. configure the 6.11.2 version"react-router-dom": "6.11.2"
3. do npm install
4. npm run build
5. serve -s build

[SantoshChowdary]

I just had the same issue running a React app on Vitejs and it seems when I remove <React.StrictMode> the navigation just works... 🤔

thanks for this..

[phurst-gh]

I just had the same issue running a React app on Vitejs and it seems when I remove <React.StrictMode> the navigation just works... 🤔

Not working for me. Has there been any mention of a fix for this?

• "react": "18.2.0",
• "react-router-dom": "6.21.0"

[Arc4d3-G]

I just had the same issue running a React app on Vitejs and it seems when I remove <React.StrictMode> the navigation just works... 🤔

Tried many solutions, but this is still the only one that worked for me. Thanks!

[gustavo-tonolli]

I changed:
const rootElement = document.getElementById('root'); const root = createRoot(rootElement); root.render(<App />)
to:
ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') as HTMLElement );

It worked for me...

[jawadchy2150]

In your index.js file, just remove the <React.StrictMode> tag. In my case, it solved the problem.
Sample snippet of index.js is given below:

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
    <App />
    </BrowserRouter> 
);

[ImJeremyHe]

Have tried all the methods mentioned above and they didn't work for me.
In my case, only windows production version can not work. It works for mac development, mac production and windows development.
Using these packages:

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.1",

[alex-mcleod]

Seeing the same thing:

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.3",  

Have tried removing React.StrictMode, which did nothing. Also attempted to use ReactDOM.render, however that appears to have been removed in my version.

Update

This turned out to be user error. It turns out that when navigating between nested routes, the same component instance is re-used (but new props are passed in based on params). In my case, I was using useState state that was based on data from the URL params. Because it was the same component being used across routes, state was not re-initialized and page content did not change.

I fixed by adding a key prop to my page component that is set based on route params.

[kaganece]

Hello, I was having this issue too after the react version update(v18.3.0).

Issue
When actions such as the link element and the navigate function were run, the location in the history object changed, but the location value passed with the context in the location provider did not change.
The problem was caused by this piece of code :

router/src/index.js

Line 101 in d2c9ad0

if (!this.unmounted) {

How I solve
I override this related componentDidMount code in my project. I set location in context correctly.

LocationProvider.prototype.componentDidMount = function componentDidMount() {
  const { state: { refs } } = this;
  refs.unlisten = globalHistory.listen(() => {
    this.setState(() => ({ context: this.getContext() }));
  });
};

[kaganece]

Hi, can you elaborate more on this. I have the same issue. The Component Did mount code where we have to write. Please help me on this. I am working this issue from past one week onwards. But did not find any solution

Hi, you can define this code block on the component where you implement reach/router.
Example:

import {
  Location
} from '@reach/router';

LocationProvider.prototype.componentDidMount = function componentDidMount() {
  const { state: { refs } } = this;
  refs.unlisten = globalHistory.listen(() => {
    this.setState(() => ({ context: this.getContext() }));
  });
};

const App = () => {
  return (
    <Location/>
  )
}