Реагировать перенаправить маршрутизатор v4, когда нет совпадения - PullRequest
Новая
       30

Реагировать перенаправить маршрутизатор v4, когда нет совпадения

0 голосов
/ 15 мая 2018

Я новичок в реагирующем маршрутизаторе (и маршрутизации на стороне клиента в целом), так что я могу думать об этом все неправильно.Извините заранее, если это так ...

В основном просто хотите реализовать 3 простых правила:

  • если нет пользователя, перенаправьте на '/ login'
  • иначе, если маршрут не существует, перенаправить на '/' (root)
  • иначе разрешить пользователю перейти на запрошенный маршрут

Я отслеживаю пользователя в this.state.user.Мой текущий маршрутизатор, похоже, следует первым двум правилам, но позволяет только аутентифицированному пользователю видеть домашнюю страницу («/ profile» перенаправляет на «/»), поэтому я знаю, что я делаю что-то не так, но не могу понять, что. 

 <Router>
    {this.state.user ? (
      <Switch>
        <Route path="/" exact component={Home}/>
        <Route path="/profile" exact component={Profile}/>
        <Route render={() => (<Redirect to="/" />)}/>
      </Switch>
    ) : (
      <Switch>
        <Route path="/login" exact component={Login}/>
        <Route render={() => (<Redirect to="/login" />)}/>
      </Switch>
    )}
 </Router>

Любой совет приветствуется.Спасибо

Ответы [ 3 ]

0 голосов
/ 08 сентября 2018

Для всех, кто прибывает сюда и ищет способ перенаправления, если ни один из маршрутов не совпадает: 

<Switch>
  // ... your routes
  <Route render={() => <Redirect to="/" />} />
</Switch>

Обратите внимание, что маршруты должны быть прямыми потомками <Switch>, например это не работает: 

<Switch>
  <Fragment>
    // ... your routes
    <Route render={() => <Redirect to="/" />} />
  </Fragment>
</Switch>

(может быть исправлено в более поздних версиях реакции-маршрутизатора)

0 голосов
/ 31 января 2019

Ответ прост 

<Switch>
  <Route path="/login" exact component={Login}/>
  {!this.state.user && <Redirect to='/login' />}
  <Route path="/" exact component={Home}/>
  <Route path="/profile" exact component={Profile}/>
  <Redirect to="/" />
</Switch>

Основное различие между коммутатором и маршрутизатором состоит в том, что маршрутизатор будет пытаться выполнить все сопоставленные пути и добавлять содержимое вместе, коммутатор остановится при первом совпадении.

Мое приложение имеет аналогичный подход, но я упаковал защищенный маршрутизируемый файл в отдельный файл, а затем обернул профиль пользователя как HOC 

export const App = () => (
  <Switch>
    <Route exact path='/login' component={Login} />
    {!hasToken() && <Redirect to='/login' />}
    <Route path='/' component={ProtectedRoute} />
  </Switch>
)

protectedRoute.js 

const ProtectedRoute = ({ userInfo }: Props) => (
  <Layout userInfo={userInfo}>
    <Switch>
      <Route exact path='/a' component={A} />
      <Route exact path='/b' component={B} />
      <Route path='/c' component={C} />
      <Redirect to='/a' />
    </Switch>
  </Layout>
)

export default withUserInfo(ProtectedRoute)
0 голосов
/ 15 мая 2018

Задумывались ли вы об использовании оболочки Route, которая проверяет пользователя, когда пользователь необходим для Route? 

const CanHasRouteAccess = ({ component: Component, iHasUser, ...rest }) => {
  return iHasUser ? (
    <Route {...rest} render={props => <Component {...props} />} />
  ) : (
    <Redirect to="/" />
  );
};

Вы можете передать реквизиты на маршрут или вызвать перенаправлениена домашнюю страницу, когда нет пользователя. 

<CanHasRouteAccess
  path="/personal-data"
  exact
  component={Profile}
  iHasUser={Boolean(user)}
  />
...