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

Question

Now I use routing like this:

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

But how can i use something like this:

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

or better this:

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

Or redirect from /main/:id page to /main/:id/basic page after loading component App2 , because i should load components App2 (first) and App3 (second) by opening /main/:id url.

Answer 1

It looks like you are using React Router 3. In this case use <IndexRedirect> component to achieve your goal:

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

Also, there is no need to use full paths in nested routes, for App3 and App4 , so your code could be a bit simplified:

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

More info about redirects can be found here

By the way, check out version 4 of React Router . It was released recently and has bunch of nice features.

Answer 2

one route path only can handle one component. you can still use current routes, so we will be redirect via component.

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

if you re using react-router v3

in App2 -> componentDidMount , add for example

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

or

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

detail about navigatoing outside component https://github.com/ReactTraining/react-router/blob/v3/docs/guides/NavigatingOutsideOfComponents.md