使用react-router将路由定向到特定组件

Question

Im want to use the following layout as the start screen of my page:

-----------------------------
| View 1      | View 2      |
| LinkA LinkB | LinkC LinkD |
|             |             |
-----------------------------

When LinkA or B are clicked I want the routes to be shown in View 1 , and when LinkC or D are clicked I want the routes to be shown in View 2 .

What I have right now is only a way to send multiple components to the App component to render View1 and View2, I dont know how to make specific routes to actually render inside them:

  <Route path="/" component={ App }>
    <IndexRoute components={{
        view1: View1,
        view2: View2
      }} />
  </Route>

What I know about react-router makes me think I want something more along the lines:

  <Route path="/" component={ App }>
    <Route component={View1} >
      <Route to="linkA" component={View1a}/>
      <Route to="linkB" component={View1b}/>
    <Route />
    <Route component={View2} >
      <Route to="linkC" component={View2a}/>
      <Route to="linkD" component={View2b}/>
    <Route />
  </Route>

Now my question is how to make the rendering work as I want and are there any tutorials showing this? Maybe im missing some basic stuff since I have not been able to find any examples like this and what I assume to be a basic layout for a page...

Answer 1

The only concern of a react-router config is to determine which component to populate this.props.children with based on the current url. You do not specify which links are displayed in the config.. you do this in the component.

In your question you say you want the start screen to contain two views. Maybe you mean two components? Every URL is responsible for one view.

With a config that looks like:

<Route path="/" component={ App }>
  <Route path="view1" component={ View1 }>
    <Route path="a" component={ View1a } />
  <Route>
  <Route path="view2" component={ View2 } />
</Route>

When the url is / , the App component's this.props.children will be empty. If you use IndexRoute it will use the component specified there.

When the url is /view1 , the App component's this.props.children will render the View1 component. Same thing for /view2 and View2 .

When the url is /view1/a , the App component's this.props.children will be View1 , and View1 's this.props.children will be View1a

So if you want to display different links based on the current view, use different links in your View1 and View2 components.