Question

如果用户经过身份验证，我已经存储在redux中。我想要做的是，一旦我转到localhost:3000/，如果用户未经过身份验证，我希望它显示主页;如果用户经过身份验证，则显示仪表板。这是我到目前为止所做的。

export default (
 <Route path="/" component={App} >
   <IndexRoute component={HomePage} />
   <Route path="/dashboard" component={Dashboard} />
   <Route path="*" component={NotFound} />
</Route>
);

我希望IndexRoute以身份验证为条件。

Answer 1

在HomePage组件中，您可以根据身份验证呈现另外两个组件。例如

class HomePage extends Component {
  //...
  render() {
    if (currentUser) return <Dashboard /> // if user exists in the store
    else if (fetchingCurrentUser) return <LoadingView /> // if you need to fetch the user show a loading page
    else return <UnauthenticatedHomeView /> // else, return a homepage for unauthenticated users
  }
}

通过这种方式，您可以完全取消'/dashboard'路线，这样用户就无需前往该路线即可访问其信息中心。此外，HomePage只是作为它可以在其中呈现的不同可能组件的容器。

您的路线将如下所示。

export default (
 <Route path="/" component={App} >
   <IndexRoute component={HomePage} />
   <Route path="*" component={NotFound} />
</Route>
);

另一个注意事项：您还可以将onEnter函数连接到要在路线即将进入时运行的路线。在这里你可以做一些其他认证来保护路线。但是，如果您使用onEnter，则上面的示例实现必须更改，但您现在知道您有该选项。

Answer 2

您可以在JSX中使用conditional rendering。

export default (
 <Route path="/" component={App} >
    {isLoggedIn ? (
      <IndexRoute component={HomePage} />
    ) : (
      <IndexRoute component={Dashboard} />
    )}
</Route>
);

React-Router：如果未经过身份验证则显示主页，如果在“/”处进行身份验证，则显示主板

2 个答案: