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 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]

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.