React router - перенаправить все маршруты, кроме одного

Question

Я пытаюсь реализовать защищенные маршруты в React.Ниже приведена моя реализация

if (isAuth()) {
      routesToRender = (
        <React.Fragment>
          {/* <Redirect exact from="/" to="/dashboard" /> */}
          <Route path="/" exact component={props => <Dashboard {...props} />} />
          <Route path="/dashboard" exact component={props => <Dashboard {...props} />} />
          <Route path="/settings/" exact component={props => <Settings {...props} />} />
        </React.Fragment>
      )
    } else {
      routesToRender = (
        <React.Fragment>
          <Route path="/signup/" exact component={props => <Signup {...props} />} />
          <Route path="/" exact component={props => <Login {...props} />} />
          <Redirect from="*" to="/" />
        </React.Fragment>
      )
    }

Если я не аутентифицирован, я хочу перенаправить все маршруты на корневой URL-адрес, который является *, и для этого я использую <Redirect from="*" to="/" />.Но я также хочу иметь доступ к /signup.

Как перенаправить со всех маршрутов, кроме одного?

Answer 1

Вместо того, чтобы писать жестко закодированные маршруты для аутентификации, вы должны вместо этого написать HOC AuthRoute,

const AuthRoute = ({component: Component, ...rest}) => {
    if(isAuth) {
        return <Route {...rest} component={Component} />
    }
    return <Redirect to="/" />
}

и использовать его как

<React.Fragment>
      {/* <Redirect exact from="/" to="/dashboard" /> */}
      <AuthRoute path="/" exact component={props => <Dashboard {...props} />} />
      <AuthRoute path="/dashboard" exact component={props => <Dashboard {...props} />} />
      <AuthRoute path="/settings/" exact component={props => <Settings {...props} />} />
 </React.Fragment>

Любой маршрут, который вы не хотите аутентифицировать, будет записан как обычный маршрут