react-router-dom 6: Route to different element programmatically

Question

I have a Class App.js, with elements SignInAndSignUpPage ("/signin") and HomePage ("/"). When a user logs in (through a Firebase db), I'd like to make the login/SignInAndSignUp page become inaccessible until they click a Sign Out button in a Header element.

  render() {
    return (
      <div>
        <Header />
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/shop" element={<ShopPage />} />
          <Route path="/signin" element={<SignInAndSignUpPage />} />
          {/* pass the currentUser state as a prop */}
          {this.props.currentUser
            ? ((<Route path="/" element={<HomePage />} />),
              console.log(`"current user info:" ${this.props.currentUser}`))
            : ((<Route path="/signin" element={<SignInAndSignUpPage />} />),
              console.log("sign in"))}
        </Routes>
      </div>
    );
  }

I'm trying to use a ternary operator to determine if this.props.currentUser is not null, then route to the HomePage. If it's null, go to the SignInAndSignUp page.

Logging shows me that this.props.currentUser is not null, and it drops into the correct call (<Route path="/" element={<HomePage />} />)when it's supposed to, but still the login page is rendered.

Removing the <Route path="/signin" element={<SignInAndSignUpPage />} /> call only removes the child components inside SignInAndSignUp but still doesn't route to HomePage.

Another way to put it, what I'm trying to achieve, is when a user logs in the page should be routed to the home page, and if they're currently logged in and try to manually update the url to get to the /signin page, they should be routed to the home page.

EDIT: Tried the ternary operator and the PrivateRoute, neither seemed to work. The ternary operator is commented out right now. Here's what the console is outputting, at least in regard to the action and payload. Payload would be null if currentUser was null.

render() {
    return (
      <div>
        <Header />
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/shop" element={<ShopPage />} />
          <Route path="/signin" element={<SignInAndSignUpPage />} />
          <Route
            path="/"
            element={
              <PrivateRoute currentUser={this.props.currentUser}>
                <HomePage />
              </PrivateRoute>
            }
          />
          {/* <Route
            path="/"
            element={
              this.props.currentUser ? <HomePage /> : <Navigate to="/signin" />
            }
          /> */}
          {/* pass the currentUser state as a prop */}
          {/* {this.props.currentUser
            ? ((<Route path="/" element={<HomePage />} />),
              console.log(`"current user info:" ${this.props.currentUser}`))
            : ((<Route path="/signin" element={<SignInAndSignUpPage />} />),
              console.log("sign in"))} */}
        </Routes>
      </div>
    );
  }
}

Here's the code for the PrivateRoute:

import React from "react";
import { Navigate } from "react-router";

const PrivateRoute = ({ children, ...props }) => {
  return props.currentUser ? children : <Navigate to="signin" />;
};

export default PrivateRoute;

Look if this helps you https://stackoverflow.com/questions/62384395/protected-route-with-react-router-v6 — Antonio Pantano, Nov 22 '21 at 22:58
Do you mean to say you want some redirection to happen? From what I can tell you are rendering duplicate routes for the `"/"` and `"/signin"` routes, the second of which won't match an render since the first already did. — Drew Reese, Nov 22 '21 at 23:00
@DrewReese I've tried removing the routes for '/' and 'signin', changing their orders. The /signin page does not re-route to the '/' page when I've excluded /signin, it just doesn't render the children. ` } /> } />` Using only the conditional rendering. — Chris, Nov 22 '21 at 23:50
Well, for starters, the `Route` component doesn't do redirection, it renders its `element` component when its `path` prop matches. You need to render a `Navigate` component in a route if you want to redirect anywhere. — Drew Reese, Nov 22 '21 at 23:54
If you are trying to secure routes, or apply conditional routing, then please check the [Auth example](https://reactrouter.com/docs/en/v6/examples/auth) for RRDv6. — Drew Reese, Nov 23 '21 at 00:00
@DrewReese the formatting came out really bad in that comment. I made an update to the post to use tag, as well as creating a separate class. Does it seem like those were used correctly? — Chris, Nov 23 '21 at 00:01
Not sure if this is the direct cause of your issue, but you are redirecting to `"signin"`, without a leading `"/"`, which is a relative navigation. i.e. redirects to `"/whereYouwere/signin"`. If you want to redirect to your `"/signin"` route then you need the leading `"/"` so it's treated as an absolute path. You are also rendering 2 routes for `"/"` still. — Drew Reese, Nov 23 '21 at 00:07
@AntonioPantano can't use hooks in a class function so useRoutes is NA — Chris, Nov 23 '21 at 00:53

Steve K · Answer 1 · 2021-11-22T23:03:08.533

If you want to use a ternary operator you can do it inside the element prop like so:

<Route path="/" element={this.props.currentUser ? <Homepage /> : <Navigate to="signin" />} />

You will obviously have to import { Navigate } from 'react-router-dom' otherwise you could probably make a custom protected route component to redirect to the signup page like so:

import { Navigate } from 'react-router-dom';

const PrivateRoute = ({ children, ...props }) => {   
  return props.currentUser
    ? children
    : <Navigate to='/signin' /> }
}

export default PrivateRoute;

then use that like

<Route path="/" element={
  <PrivateRoute currentUser={this.props.currentUser}>
    <Homepage />
  </PrivateRoute>
} />

Just made an edit to the original post, thanks for the comment. — Chris, Nov 22 '21 at 23:45

score 0 · Answer 2 · answered Nov 23 '21 at 01:33

Ok, I figured it out. I kept getting this error in the console 'React router did not match any routes /signin', and I believe that's because with <Navigate to='/signin/ /> I never declared the element anywhere in my route declarations.

const PrivateRoute = ({ children, ...props }) => {   
  return props.currentUser
    ? children
    **: <Navigate to='/signin' /> }**
}

So, I updated to:

const PrivateRoutes = ({ children, ...props }) => {
  return !props.currentUser ? children : <Navigate to="/" />;
};

If currentUser is null, render the (SignInAndSignUp) children, otherwise Navigate to '/'.

App.js updates:

render() {
    return (
      <div>
        <Header />
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route
            path="/signin"
            element={
              <PrivateRoutes currentUser={this.props.currentUser}>
                <SignInAndSignUpPage />
              </PrivateRoutes>
            }
          />
          <Route path="/shop" element={<ShopPage />} />
        </Routes>
      </div>
    );
  }

I have to leave <Route path="/" element={<HomePage />} /> in the declaration because otherwise I get the 'React router did not match any routes' error. I realize this seems odd, backwards even, but reversing it so the PrivateRoutes navigates to HomePage instead doesn't seem to work. Thoughts are definitely welcome as I realize this isn't the greatest of code.

react-router-dom 6: Route to different element programmatically

2 Answers2