Question

我想为特定路线提供包装。例如。对于登录和注册路由，我想要一个包装，而对于受保护的路由，我想要一个包装。

在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>

解决此问题的最佳方法是什么？

针对特定路由做出反应的路由器包装器

0 个答案: