Реагировать на упаковщик маршрутизатора для конкретного маршрута - PullRequest
Новая
       6

Реагировать на упаковщик маршрутизатора для конкретного маршрута

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

Я хотел бы иметь упаковщики для определенных маршрутов. Например. Для входа в систему и регистрации я хочу иметь одну оболочку, а для моего защищенного маршрута - другую.

В документах React Router они решают эту проблему путем рендеринга компонента (AuthButton) на каждом маршруте и изменения компонента в зависимости от состояния. Однако в моем случае я хочу, чтобы это была оболочка с большим количеством кода и несколькими оболочками. 

function AuthExample() {
  return (
    <Router>
      <div>
        <AuthButton />
        <ul>
          <li>
            <Link to="/public">Public Page</Link>
          </li>
          <li>
            <Link to="/protected">Protected Page</Link>
          </li>
        </ul>
        <Route path="/public" component={Public} />
        <Route path="/login" component={Login} />
        <PrivateRoute path="/protected" component={Protected} />
      </div>
    </Router>
  );
}

Приведенный ниже код демонстрирует, как я пытался решить эту проблему, однако всегда отображается первый маршрут, поскольку путь не определен и он включен в коммутатор. 

<BrowserRouter>
    <Switch>
        <Route component={PrivateWrapper}>
            <Switch>
                <PrivateRoute path="/home" exact component={MainPage} />
                <PrivateRoute path="/friends" component={FriendsPage} />
            </Switch>
        </Route>
        <Route component={AuthWrapper}>
            <Route path="/login" component={LoginForm} />
            <Route path="/register" component={RegisterForm} />
        </Route>
        <Route path="/" exact component={HomePage} />
    </Switch>
</BrowserRouter>

Как лучше всего подойти к этой проблеме?

...