在react-router v4中使用React IndexRoute

Quoc-Hao Tran：

我正在通过在线教程来学习自己。

因此，这是有关使用React Router的基本示例：

<Router history={browserHistory}>
  <Route path="/" component={App}>
    <IndexRoute component={Home}/>
    <Route path="/home" component={Home}/>
    <Route path="/about" component={About}/>
    <Route path="/contact" component={Contact}/>
  </Route>
</Router>

使用我的App组件：

class App extends React.Component {
   render() {
      return (
         <div>
            <ul>
              <li><Link to="home">Home</Link></li>
              <li><Link to="about">About</Link></li>
              <li><Link to="contact">Contact</Link></li>
           </ul>
          {this.props.children}
        </div>
     )
   }
}
export default App;

但是，在使用IndexRoute时遇到问题，因为它什么也没显示，所以我在npm上搜索react-router-dom v4的模块，并且里面没有IndexRoute。相反，它使用以下代码：

<Router>
  <div>
  <ul>
    <li><Link to="/">Home</Link></li>
    <li><Link to="/about">About</Link></li>
    <li><Link to="/contact">Contact</Link></li>
  </ul>
  <hr/>
  <Route exact path="/" component={Home}/>
  <Route path="/about" component={About}/>
  <Route path="/contact" component={Contact}/>
  </div>
</Router>

那么如何为1个路径渲染2个组件？

Deividas Karzinauskas：

UPDATE react-router-4已更改，因为它不再有子级。但是，使用该Route组件，您可以呈现与路径匹配的任何内容。

<Router>
  <div>
    <ul>
      <li><Link to="/">Home</Link></li>
      <li><Link to="/about">About</Link></li>
      <li><Link to="/contact">Contact</Link></li>
    </ul>
    <hr/>

    // All 3 components below would be rendered when in a homepage
    <Route exact path="/" component={Home}/>
    <Route exact path="/" component={About}/>
    <Route exact path="/" component={Contact}/>

    <Route path="/about" component={About}/>
    <Route path="/contact" component={Contact}/>
  </div>
</Router>

请参阅此bin进行实验https://www.webpackbin.com/bins/-Kf5cpLcax4dttAEvkCW。

这意味着，如果需要包装器，可以将其写入组件内部。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。