如何在React Router中链接到嵌套路由

Question

当前，我在我的应用程序中使用以下代码。

const {
  Router,
  Route,
  IndexRoute,
  Redirect,
  Link,
  IndexLink,
  hashHistory
} = ReactRouter

var App = React.createClass({
  render : function() {
  	return (
    	<div>
      	<h1>My Application</h1>
        <div><Link to="/levelone/1">Go to One</Link></div>
        <div><Link to="/levelone/1/leveltwo/5">Go to Three</Link></div>
        {this.props.children}
      </div>
    )
  }
})

var Index = React.createClass({
  render : function() {
  	return (
      <div>
      	<h2>This is index route</h2>
      </div>
    )
  }
})

var LevelOne =  React.createClass({
  render : function() {
  	return (
    	<div>
      	<h2>This is LevelOne</h2>
        {this.props.children}
      </div>
    )
  }
})

var LevelTwo = React.createClass({
  render : function() {
  	return (
    	<div>
      	<h2>This is LevelTwo</h2>
      </div>
    )
  }
})


var routes= (
	<Route path= "/" component={App}>
    	<IndexRoute component={Index}/>
    	<Route path="/levelone/:id" component={LevelOne}>
            <Route path="/leveltwo/:idd" component={LevelTwo}/>
        </Route>
    </Route>
)

ReactDOM.render(<Router history={ hashHistory } routes={routes}></Router>, document.getElementById('app'));
 

<script src="https://unpkg.com/react@15.1.0/dist/react-with-addons.js"></script>
<script src="https://unpkg.com/react-dom@15.1.0/dist/react-dom.js"></script>
<script src="https://npmcdn.com/react-router@3.0.0/umd/ReactRouter.js" charset="utf-8"></script>
<div id="app"><div>

在上面的代码中，我/levelone/1/leveltwo/5从App无法正常工作并显示错误的组件进行链接[react-router] Location "/levelone/1/leveltwo/5" did not match any routes。

但是，如果我将链接放在组件中，LevelOne如下面的代码片段所示，该链接将指向LevelTwo，就像我想要的那样

var LevelOne =  React.createClass({
    render : function() {
        return (
            <div>
                <h2>This is LevelOne</h2>
                <div><Link to="leveltwo/5">Go to LevelTwo</Link></div>
                {this.props.children}
            </div>
        )
    }
})

如果要从最外部的组件链接到LevelTwo，该怎么办？

Answer 1

嵌套路由时，当您打算实际使用相对路径时要小心，不要使用绝对路径。您的路线定义

<Route path="/leveltwo/:idd" component={LevelTwo}/>

应该是：

<Route path="leveltwo/:idd" component={LevelTwo}/>

<div><Link to="leveltwo/5">Go to LevelTwo</Link></div>工作的原因是因为<Link>只支持绝对路径（见上文）并且实际上指向/leveltwo/5并且您最初的路由定义是使用绝对路径定义的。因此，尽管代码运行了，但它实际上并没有按照您预期的方式运行。