反应路由器 - 受保护的路由组件不起作用

Posted 2023-02-22

【中文标题】反应路由器 - 受保护的路由组件不起作用

【英文标题】：React router - protected route component isn't working

【发布时间】：2021-10-27 07:23:24

【问题描述】：

如果userAccount boolean 为真，我想显示SignUp 页面组件， 否则显示Header 导航栏。

我尝试添加/删除并重新放置<Switch>，但没有任何效果。

我在这里做错了什么。除了GuardedRoute's Redirect 之外一切正常。

App.js

 return (
    <div className='App'>
      <GuardedRoute path='/signup' auth=userAccount>
        <Switch>
          <SignUp/>
        </Switch>
      </GuardedRoute>
      <Header
      />
      <div className='contant-page'>
        <Switch>
          <Route exact path='/'>
            <Home />
          </Route>
          <Route exact path='/search'>
            <Search
            />
          </Route>
          <Route exact path='/cart'>
            <Cart
            />
          </Route>
          <Route component=PageNotFound />
        </Switch>
      </div>
    </div>
  );

受保护的路线

function GuardedRoute( children, auth, path, ...rest ) 
  console.log('GuardedRoute ' + auth);
  return (
    <Route
      path=path
      render=() => 
        return auth ? children : <Redirect to='/signup' />;
      
    />
  );

相同的受保护路线在其他项目中工作，但这里我有一个标题导航栏，因此路线的代码和顺序不同。

【参考方案1】：

试试这个：

 <div className='contant-page'>
    <Switch>
      <GuardedRoute exact path='/' auth=userAccount>
        <Home />
      </GuardedRoute>
      <GuardedRoute exact path='/search' auth=userAccount>
        <Search
        />
      </GuardedRoute>
      <GuardedRoute exact path='/cart' auth=userAccount>
        <Cart
        />
      </GuardedRoute>
      <GuardedRoute component=PageNotFound/>
    </Switch>
  </div>
</div>

所有路由都必须在交换机内。如果调用了任何受保护的路由并且 auth 为 false，则该路由将重定向到注册作为示例。

【讨论】：

为什么GuardedRoute 包含所有其他组件？为什么是</Route>？

你要做的是：创建一个有保护的注册路由。如果 auth 为 false，则重定向到注册。 auth 是否为真，渲染子项（也是注册组件）

这是行不通的，没有一个会以这种方式呈现。我需要 SignUp 组件显示没有 Header

这里是一个沙盒示例：codesandbox.io/s/nostalgic-stallman-h9k33?file=/src/App.js

好的，谢谢，仍然 - 我在主页/搜索/购物车上方有一个导航栏。我只想显示signUp。我将展示我的代码示例