Failed prop type: Invalid prop `to` supplied to `Redirect`

Question

My app.js looks like this:

export default function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/auth" component={AuthenticationLayout} />
        <Route path="/dash" component={DashboardLayout} />

        <Route exact path="/" render={() => (
          <Redirect to={AuthenticationLayout} />
        )}/>
      </Switch>
    </BrowserRouter>
  );
}

Cant't undersatnd what's the problem

Suggestions?

Answer 1

Redirect is a navigate to a new location, to accept the URL to redirect to, you can write like this:

<Route exact path="/" render={() => (
      <Redirect to="/auth" />
    )}/>

Answer 2

The to prop in Redirect accepts either a string, which is the route you want to navigate to, or an object which can contain properties like pathname , state , etc.

Ex (from the docs):

<Redirect
  to={{
    pathname: "/login",
    search: "?utm=your+face",
    state: { referrer: currentLocation }
  }}
/>

So, when you are trying to pass a component to the prop to , you get an error.

Correct implementation is:

<Redirect to="/auth" />