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。

但是，如果我将链接放在组件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就像我想要的那样

{{1}}

如果我想从最外面的组件链接到LevelTwo，我该怎么办？

Answer 1

~~LevelOne组件（<Link to="leveltwo/5">Go to LevelTwo</Link>）中定义的路径是此处的问题。您的所有链接都必须使用绝对路径。~~

引自https://github.com/ReactTraining/react-router/blob/master/docs/API.md#link

<强>道具

to

位置描述符。通常这是一个字符串或对象，具有以下语义：

如果它是一个字符串，则表示链接到的绝对路径，例如/ users / 123（不支持相对路径）。

...

~~所以你的路径应该改为<Link to={"/levelone/" + this.props.params.id + "/leveltwo/5"}>Go to LevelTwo</Link>。~~

编辑：对不起，凌晨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并且您最初使用绝对定义的路由定义路径。因此，尽管代码已经运行，但它实际上并没有按照您的预期运行。

Answer 2

我认为问题在于您在子路径定义中有/。

只需改变一下：

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

到

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

以下是工作代码段

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>

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

2 个答案: