在 react-router v4 中使用 React IndexRoute [英] Using React IndexRoute in react-router v4

问题描述

我正在通过在线教程学习 React.

这是一个关于使用 React Router 的基本示例:

<Route path="/" component={App}><IndexRoute 组件={Home}/><Route path="/home" component={Home}/><Route path="/about" component={About}/><Route path="/contact" component={Contact}/></路线></路由器>

使用我的应用组件:

class App 扩展 React.Component {使成为() {返回 (<div><ul><li><Link to="home">Home</Link></li><li><Link to="about">关于</Link></li><li><Link to="contact">联系方式</Link></li>{this.props.children}

)}}导出默认应用程序；

但是，我在使用IndexRoute时遇到了问题，因为它什么也没显示，所以我在npm上搜索react-router-dom v4的模块，里面没有IndexRoute.相反，它使用这个:

<路由器><div><ul><li><Link to="/">首页</Link></li><li><Link to="/about">关于</Link></li><li><Link to="/contact">联系方式</Link></li><小时/><路由精确路径="/" component={Home}/><Route path="/about" component={About}/><Route path="/contact" component={Contact}/>

</路由器>

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

解决方案

UPDATEreact-router-4 已经改变，它不再有孩子.但是，使用 Route 组件，您可以渲染任何与路径匹配的内容.

<路由器><div><ul><li><Link to=/">主页</Link></li><li><Link to=/about">About</Link></li><li><Link to=/contact">Contact</Link></li><小时/>//下面的所有 3 个组件都将在主页中呈现<路由精确路径="/";组件={Home}/><路由精确路径="/";组件={关于}/><路由精确路径="/";组件={联系人}/><路线路径=/about";组件={关于}/><路由路径="/contact";组件={联系人}/>

</路由器>

这意味着如果你想要一个包装器，你可以把它写在组件内部.

I'm learning React myself with online tutorial.

So this is a basic example about using 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>

With my App component:

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;

However, I have problem when using IndexRoute because it shows nothing, so I search for the module of react-router-dom v4 on npm and there is no IndexRoute inside. Instead it uses this:

<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>

So how can I render 2 component for 1 path ?

解决方案

UPDATE react-router-4 has changed in that it no longer has children. However, with the Route component you can render anything that matches the path.

<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>

This means that if you want a wrapper, you can write it inside the component.

这篇关于在 react-router v4 中使用 React IndexRoute的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！