小编典典

在react-router v4中使用React IndexRoute

reactjs

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

因此,这是有关使用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个组件?


阅读 264

收藏
2020-07-22

共1个答案

小编典典

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

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

2020-07-22