Question

我正在创建一个电子应用程序，我不确定处理以下内容的最佳模式：

该应用可让用户创建群组。因此，组路线为/group/:groupId。此应用程序没有主页，而是默认为第一个可用组并显示该主页。那么，如何在应用程序加载时将此动态重定向处理为可用的第一个组？

在v3中有一个你可以在路线上设置的onEnter参数，但我还没有能够在v4中找到这种类型的模式。任何正确方向的指针都会很棒。谢谢！

不确定这是多么有用，但目前我的路线是：

<Route exact path="/" component={HomePage} />
<Route path="/group/:groupId" component={GroupPage}>
  <Route path="/group/:groupId/edit" component={EditGroupModal} />
</Route>

HomePage实际上并不存在，但我可以处理从本地存储加载组，然后强制在此组件内部重定向。只是不确定它是最好的方法。

Answer 1

可以分配给函数的React Router V4 has a render属性。在该函数中，您可以执行您想要的任何操作或条件。

您的路线应该类似于：

<Route exact path="/groups" render={() => (
    <Redirect to=`/groups/${id}` />
  )
)}/>

我在特定情况下看到的挫折是访问id本身，因为组路由是/groups。如果您已使用onEnter()功能，则可能会使用render() API。

Answer 2

您可以在HomePage组件中使用<Redirect />。 docs有一些示例，但是一旦获得了组ID，您的render()功能就可以

return (
    <Redirect to=`/group/${id}` />
);

React Router v4动态重定向初始加载

2 个答案: