CODEWITHSUNDEEP
javascriptreactjsreact-router-dom
Tanvesh
Tanvesh

Reputation: 125

Navigate in react-router dom renders a blank page

I am a beginner with react-router-dom, there are two different states in the code when I dont use Navigate from react-router-dom , it works properly , but when I use the Navigate function it renders a blank page.

I have confirmed that all the individual components work and render properly. Please help me solve this issue .

Here is my code of App.js without Navigate

import React from 'react';
import { Container } from '@material-ui/core';
import { BrowserRouter , Route , Routes , Navigate } from 'react-router-dom'
import PostDetails from './components/PostDetails/PostDetails';
import Home from './components/Home/Home';
import Navbar from './components/Navbar/Navbar';
import Auth from './components/Auth/Auth';


const App = () => {
  const user = JSON.parse(localStorage.getItem('profile'));

  return (
    <BrowserRouter>
      <Container maxWidth="lg">
        <Navbar />
        <Routes>
          <Route exact path="/"  element ={<Home/>} />
          <Route path="/auth"  element={<Auth/>} />
          <Route path="/posts" exact element={<Home/>} />
          <Route path="/posts/search" exact element={<Home/>} />
          <Route path="/posts/:id" exact element={<PostDetails/>} />
          <Route path="/auth" exact element={() => (!user ? <Auth /> : <Navigate to="/posts" />)} />
        </Routes>
      </Container>
    </BrowserRouter>
  )
};



export default App;

Here is my code of App.js with Navigate which does not works

import React from 'react';
import { Container } from '@material-ui/core';
import { BrowserRouter , Route , Routes , Navigate } from 'react-router-dom'
import PostDetails from './components/PostDetails/PostDetails';
import Home from './components/Home/Home';
import Navbar from './components/Navbar/Navbar';
import Auth from './components/Auth/Auth';


const App = () => {
  const user = JSON.parse(localStorage.getItem('profile'));

  return (
    <BrowserRouter>
      <Container maxWidth="lg">
        <Navbar />
        <Routes>
          <Route path="/" exact component={() => <Navigate replace to="/posts" />} />
          <Route path="/posts" exact element={<Home/>} />
          <Route path="/posts/search" exact element={<Home/>} />
          <Route path="/posts/:id" exact element={<PostDetails/>} />
          <Route path="/auth" exact element={() => (!user ? <Auth /> : <Navigate replace to="/posts" />)} />
        </Routes>
      </Container>
    </BrowserRouter>
  )
};



export default App;

Upvotes: 1

Views: 4910

Answers (2)

Drew Reese
Drew Reese

Reputation: 203408

In react-router-dom@6 the Route components's element prop takes only a ReactNode, a.k.a. JSX. You've one route taking a component prop which is invalid, and two routes passing a function.

Use the element prop and pass JSX only.

Note that there is also no longer any exact prop, in RRDv6 all routes are always exactly matched.

<BrowserRouter>
  <Container maxWidth="lg">
    <Navbar />
    <Routes>
      <Route path="/" element={<Navigate replace to="/posts" />} />
      <Route path="/posts" element={<Home />} />
      <Route path="/posts/search" element={<Home />} />
      <Route path="/posts/:id" element={<PostDetails />} />
      <Route
        path="/auth"
        element={!user ? <Auth /> : <Navigate replace to="/posts" />}
      />
    </Routes>
  </Container>
</BrowserRouter>

If you are trying to protect these "/posts*" routes then it is common to create a layout route to handle redirecting to the login route or render the protected routes.

Example:

const AuthLayout = ({ authenticated }) => 
  authenticated
    ? <Outlet />
    : <Navigate to="/auth" replace />;

...

<BrowserRouter>
  <Container maxWidth="lg">
    <Navbar />
    <Routes>
      <Route element={<AuthLayout authenticated={!!user} />}>
        <Route path="/posts" element={<Home />} />
        <Route path="/posts/search" element={<Home />} />
        <Route path="/posts/:id" element={<PostDetails />} />
      </Route>
      <Route path="/" element={<Navigate replace to="/posts" />} />
      <Route
        path="/auth"
        element={!user ? <Auth /> : <Navigate replace to="/posts" />}
      />
    </Routes>
  </Container>
</BrowserRouter>

Upvotes: 2

Okan Karadag
Okan Karadag

Reputation: 3055

use element props instead component

<Route path="/" exact component={() => <Navigate replace to="/posts" />} />

<Route path="/" exact element={() => <Navigate replace to="/posts" />

Upvotes: -1

Related Questions