Routes not rendering components when navigating #504

jenapidev · 2022-04-07T14:34:04Z

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"

The text was updated successfully, but these errors were encountered:

chrisl777 · 2022-04-09T04:51:26Z

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

konsumer · 2022-04-15T01:49:24Z

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 preact@10.7.1 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 · 2022-04-16T12:13:42Z

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

NEXT3R · 2022-04-26T13:31:16Z

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

romainbessugesmeusy · 2022-04-26T13:36:25Z

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 · 2022-04-26T14:25:10Z

@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 · 2022-05-04T20:57:28Z

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 · 2022-05-19T16:56:59Z

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 · 2022-06-23T14:59:18Z

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 · 2022-09-16T19:57:50Z

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 · 2022-10-01T14:27:11Z

This worked for me too, many thanks

brianbentancourt · 2022-10-11T13:41:49Z

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 · 2022-11-29T16:04:05Z

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 · 2022-11-29T20:33:18Z

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 · 2023-03-23T11:36:16Z

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

y1n0 · 2023-03-29T07:23:02Z

"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 · 2023-04-18T02:40:08Z

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 · 2023-04-24T08:52:39Z

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 · 2023-05-27T19:54:38Z

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 · 2023-06-14T08:08:53Z

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

Gechrist · 2023-06-14T08:30:28Z

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

Anurag-kuswaha · 2023-06-14T08:39:18Z

@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 · 2023-06-14T10:23:08Z

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

Anurag-kuswaha · 2023-06-14T10:38:20Z

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 · 2023-06-14T10:41:58Z

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 · 2023-06-14T10:55:02Z

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 · 2023-06-14T11:31:26Z

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 · 2023-06-14T11:44:57Z

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 · 2023-06-14T12:19:52Z

@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 · 2023-06-14T12:25:01Z

@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",

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

Why: - We were using a pre-release version of React concurrent mode, but it has already been released officially, so it's time to upgrade. - React's StrictMode causes the elements to be mounted twice, which caused two the OpenLayers Maps to be created inside the div. The fix was to implement componentWillUnmount and destroy the Map on unmount. - Reach Router is incompatible with React 18, and StrictMode causes navigation to not work. There will be no Reach Router v2, so the fix is to migrate to React Router v6. reach/router#504 https://reactrouter.com/en/main/upgrading/reach - React Router doesn't have the equivalent of Reach Router's globalHistory, so we used the useEffect workaround from remix-run/remix#5999

SantoshChowdary · 2023-10-02T11:55:47Z

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 · 2024-01-03T01:05:25Z

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 · 2024-01-24T07:33:58Z

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 · 2024-02-09T19:05:55Z

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 · 2024-03-06T13:41:51Z

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 · 2024-03-31T16:55:38Z

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 · 2024-04-15T18:37:00Z

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.

canmingir mentioned this issue Apr 8, 2024

Fix navigate(0) NucleoidAI/IDE#222

Closed

Routes not rendering components when navigating #504

Routes not rendering components when navigating #504

Comments

jenapidev commented Apr 7, 2022

chrisl777 commented Apr 9, 2022

konsumer commented Apr 15, 2022 • edited

romainbessugesmeusy commented Apr 16, 2022

NEXT3R commented Apr 26, 2022

romainbessugesmeusy commented Apr 26, 2022

NEXT3R commented Apr 26, 2022

mceasyweb commented May 4, 2022 • edited

OllyHodgson commented May 19, 2022

ldalves commented Jun 23, 2022

rahulsharmabhu commented Sep 16, 2022

chucksdaniel commented Oct 1, 2022

brianbentancourt commented Oct 11, 2022

dinesh-hills commented Nov 29, 2022

ldalves commented Nov 29, 2022

Gechrist commented Mar 23, 2023

y1n0 commented Mar 29, 2023

jndietz commented Apr 18, 2023

nishamvp commented Apr 24, 2023

hudaalii commented May 27, 2023 • edited

Anurag-kuswaha commented Jun 14, 2023

Gechrist commented Jun 14, 2023

Anurag-kuswaha commented Jun 14, 2023 • edited

FarhanSulaiman commented Jun 14, 2023

Anurag-kuswaha commented Jun 14, 2023

FarhanSulaiman commented Jun 14, 2023

Anurag-kuswaha commented Jun 14, 2023

rajuchowdary commented Jun 14, 2023

Anurag-kuswaha commented Jun 14, 2023

rajuchowdary commented Jun 14, 2023

Anurag-kuswaha commented Jun 14, 2023

SantoshChowdary commented Oct 2, 2023

phurst-gh commented Jan 3, 2024 • edited

Arc4d3-G commented Jan 24, 2024

gustavo-tonolli commented Feb 9, 2024

jawadchy2150 commented Mar 6, 2024

ImJeremyHe commented Mar 31, 2024 • edited

alex-mcleod commented Apr 15, 2024 • edited

konsumer commented Apr 15, 2022 •

edited

mceasyweb commented May 4, 2022 •

edited

hudaalii commented May 27, 2023 •

edited

Anurag-kuswaha commented Jun 14, 2023 •

edited

phurst-gh commented Jan 3, 2024 •

edited

ImJeremyHe commented Mar 31, 2024 •

edited

alex-mcleod commented Apr 15, 2024 •

edited