我如何使用 reactjs 中的路由在加载到另一个页面后从一个页面重定向 url

Question

现在我这样使用路由：

<Route path='/main' component={App1}>
  <Route path='/main/:id' component={App2}>
    <Route path='/main/:id/basic' component={App3}/>
    <Route path='/main/:id/page1' component={App4}/>
  </Route>
</Route>

但是我怎样才能使用这样的东西：

<Route path='/main' component={App1}>
  <Route path='/main/:id' component={App2, App3} />
  <Route path='/main/:id/page1' component={App4}/>
</Route>

或更好这个：

<Route path='/main' component={App1}>
  <Route path='/main/:id' component={App2, App3}>
    <Route path='/main/:id/basic' component={App3}/>
    <Route path='/main/:id/page1' component={App4}/>
  </Route>
</Route>

或者在加载组件 App2 后从 /main/:id 页面重定向到 /main/:id/basic 页面，因为我应该加载组件 App2（首先）和 App3（第二）打开 /main/:id url.

Answer 1

一个路由路径只能处理一个组件。您仍然可以使用当前路由，因此我们将通过组件重定向。

<Route path='/main' component={App1}>
  <Route path='/main/:id' component={App2}>
    <Route path='/main/:id/basic' component={App3}/>
    <Route path='/main/:id/page1' component={App4}/>
  </Route>
</Route>

如果您使用的是 react-router v3

在 App2 -> componentDidMount 中，添加例如

this.context.router.push({ pathname: `/main/3/basic`})

或

browserHistory.push('/main/3/basic')

有关导航外部组件的详细信息https://github.com/ReactTraining/react-router/blob/v3/docs/guides/NavigatingOutsideOfComponents.md

Answer 2

看起来您正在使用 React Router 3。在这种情况下，使用 <IndexRedirect> 组件来实现您的目标：

<Route path='/main' component={App1}>
  <Route path='/main/:id' component={App2}>
    <IndexRedirect to='basic' />
    <Route path='/main/:id/basic' component={App3}/>
    <Route path='/main/:id/page1' component={App4}/>
  </Route>
</Route>

此外，对于 App3 和 App4，无需在嵌套路由中使用完整路径，因此您的代码可以稍微简化：

<Route path='/main' component={App1}>
  <Route path=':id' component={App2}>
    <IndexRedirect to='basic' />
    <Route path='basic' component={App3}/>
    <Route path='page1' component={App4}/>
  </Route>
</Route>

可以找到有关重定向的更多信息here

顺便看看version 4 of React Router。它是最近发布的，具有许多不错的功能。

我如何使用 reactjs 中的路由在加载到另一个页面后从一个页面重定向 url

How could i use the routing in reactjs to redirect from one page after loading to another url

javascript

routing

reactjs

redux

react-redux