如何在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>

在上面的代码中，我从组件App链接到 /levelone/1/leveltwo/5，但此链接无法正常工作，并显示错误[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，应该怎么做？

- Nijeesh

Answer 1

当嵌套路由时，要小心使用相对路径而不是绝对路径。您的路由定义 应改为： 之所以

Go to LevelTwo

能够工作，是因为仅支持绝对路径（请参见上文），实际上指向/leveltwo/5，而您最初定义的路由路径是绝对路径。因此，尽管代码运行了，但实际上并没有按照您的意图运行。

- seisei

---

没有冒犯之意，但我认为您误读了这个问题。他说将 <Link to="leveltwo/5">Go to LevelTwo</Link> 放在 LevelOne 组件内对他有效，而将绝对 URL 放在最外层的 App 组件中则无效。当您运行代码片段时可以看到这一点。 - ajaybc

你说得对，谢谢。我显然应该去睡觉了。 - seisei

Answer 2

我认为问题在于你在子路由定义中有一个/。

只需将此更改为： <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>

- ajaybc