ReactRouter 4 перенаправить на домашнюю страницу на других маршрутах - PullRequest
Новая
       7

ReactRouter 4 перенаправить на домашнюю страницу на других маршрутах

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

В моем приложении React, если пользователь вошел в систему, я хочу показать набор компонентов, а если не вошел в другой набор компонентов.Теперь я хочу перенаправить любые другие пути к компоненту GuestUser, который также является одним из точных путей. 

      <Router>
          <React.Fragment>
            <Header />
            {LoggedIn? (
              <div className="app-content">{this.getRoutes()}</div>
            ) : (
                <div className="app-content">{this.getGuestRoutes()}</div>
            )}
            <Footer />
          </React.Fragment>
        </Router>

Guest Routes похож на 

  private getGuestRoutes() {
    return (
      <React.Fragment>
        <Route path={'/:id'} exact component={GuestUser} />
        <Route path={'/:id/policy'} exact component={...}/>
        <Route path={'/:id/signIn'} exact component={...} />
        <Route component={GuestUser} />
      </React.Fragment>
   );}

Во многих вопросахЯ вижу, что написание <Route component={GuestUser} /> должно отрисовывать GuestUser компонент на любых других путях, а не на точных.Но то, что я вижу, это то, что GuestUser компонент рендерится снизу / ниже других компонентов на каждом пути.

Проблема здесь с React.Fragment?
Как перенаправить / визуализировать определенный компонент на любом другом пути, кроме точного?

1 Ответ

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

Вы должны обернуть свои <Route> s <Switch>, чтобы быть уверенным, что будет визуализирован только один из них. 

import { Route, Switch } from 'react-router-dom'

<Switch>
  <Route path={'/:id'} exact component={GuestUser} />
  <Route path={'/:id/policy'} exact component={...}/>
  <Route path={'/:id/signIn'} exact component={...} />
  <Route component={GuestUser} />
</Switch>
...