Javascript react-router-dom v4 中的多个嵌套路由
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42984597/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple Nested Routes in react-router-dom v4
提问by Aditya Talpade
I need multiple nested routes in react-router-dom
我需要 react-router-dom 中的多个嵌套路由
I am using v4 of react-router-dom
我正在使用 react-router-dom 的 v4
I've got my
我有我的
import { BrowserRouter as Router, Route } from 'react-router-dom';
and I need the components to render like so
我需要组件像这样渲染
--- Login
--- Home
--- Page 1
--- Page 2
--- Page 3
--- About
--- etc
The Home component contains a Header component that is common to Page1, Page2, and, Page3 components, but is not present in Login and About.
Home 组件包含一个 Header 组件，它对于 Page1、Page2 和 Page3 组件是通用的，但在 Login 和 About 中不存在。
My js code reads like so
我的 js 代码是这样读的
<Router>
<div>
<Route path='/login' component={Login} />
<Home>
<Route path='/page1' component={Page1} />
<Route path='/page2' component={Page2} />
<Route path='/page3' component={Page3} />
</Home>
<Route path='/about' component={About} />
</div>
</Router>
I expect the Login component to show only on /login When I request for /page1, /page2, /page3, they should contain the Home component and that page's content respectively.
我希望登录组件只显示在 /login 当我请求 /page1、/page2、/page3 时，它们应该分别包含 Home 组件和该页面的内容。
What I get instead is the Login component rendered and below that Page1's component is rendered.
我得到的是呈现的登录组件，并在页面 1 的组件下方呈现。
I'm pretty sure that I'm missing something very trivial or making a really silly mistake somewhere, and would appreciate all the help I could get. I've been stuck with this for the last two days.
我很确定我遗漏了一些非常微不足道的东西或在某处犯了一个非常愚蠢的错误，并感谢我能得到的所有帮助。过去两天我一直被这个问题困扰。
采纳答案by Igor Stetsiura
Use Switch component in router v4
在路由器 v4 中使用 Switch 组件
<Router>
<Switch>
<Route path='/login' component={Login} />
<Route path='/about' component={About} />
<Home>
<Route component={({ match }) =>
<div>
<Route path='/page1' component={Page1} />
<Route path='/page2' component={Page2} />
<Route path='/page3' component={Page3} />
</div>
}/>
</Home>
</Switch>
export default class Home extends Component {
render() {
return (
<div className="Home">
{ this.props.children }
</div>
)
}
}
I think this code shows the basic idea of using component.
我认为这段代码展示了使用组件的基本思想。
回答by Ram Babu S
Use the url/path match obtained from props this.props.match.pathto get the path that is set to a component.
使用从 propsthis.props.match.path获取的 url/path 匹配来获取设置到组件的路径。
Define your main routes as below
定义您的主要路线如下
<Router>
<div>
<Route exact path="/" component={DummyIndex} /> {/* Note-1 */}
<Route path="/login" component={Login} />
<Route path="/home" component={Home} />
<Route path="/about" component={About} />
<Route path="/etc" component={Etc} />
</div>
</Router>
Then in HomeComponent, define your routes
然后在Home组件中，定义你的路由
class Home extends Component {
render() {
return <div>
<Route exact path={this.props.match.path} component={HomeDefault} />
<Route path={`${this.props.match.path}/one`} component={HomePageOne} />
<Route path={`${this.props.match.path}/two`} component={HomePageTwo} />
</div>
}
}
The defined routes are as below
定义的路由如下
- /login
- /home
- /home/one
- /home/two
- /about
- /etc
- /登录
- /家
- /家/一
- /家/二
- /关于
- /等等
If you want to nest routes further in HomePageOnelike /home/one/aand /home/one/b, you can proceed the same approach.
如果您想在/home/one/a和/home/one/bHomePageOne等中进一步嵌套路由，您可以继续使用相同的方法。
Note-1: If you don't want further nesting, just set the route with prop exact.
注1：如果您不想进一步嵌套，只需使用 prop 设置路由即可exact。
EDIT (May 15, 2017)
编辑（2017 年 5 月 15 日）
Initially, I've used props.match.urland now I changed it to props.match.path.
最初，我使用过props.match.url，现在我将其更改为props.match.path.
We can use props.match.pathinstead of props.match.urlin Route's path so that if you use path params in top level routes, you can get it in inner (nested) routes via props.match.params.
我们可以在路由的路径中使用props.match.path代替，props.match.url这样如果你在顶级路由中使用路径参数，你可以通过props.match.params.
If you don't you any path params, props.match.urlis enough
如果你没有任何路径参数，props.match.url就足够了
回答by Mirdrack
This week I had the same problem, I think the project is passing for time of confusion because all the documentation, examples and videos are for the previous versions and the docs for the version 4 are confusing
This is how I get the things done, let me know if this help
本周我遇到了同样的问题，我认为该项目已经过去了一段时间，因为所有文档、示例和视频都是针对以前版本的，而版本 4 的文档令人困惑
这就是我完成工作的方式，让我知道这是否有帮助
import React, { Component } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Root from './Root';
import Home from './Home';
import About from './About';
import './App.css';
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<Root>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/home" component={Home} />
<Route path="/about" component={About} />
</Switch>
</Root>
</div>
</BrowserRouter>
);
}
}
export default App;
回答by Umair Ahmed
Move all childs routes to parent component and extend route like below. <Route path={`${match.url}/keyword`} component={Topic}/>
also check react router training
将所有子路由移动到父组件并扩展路由，如下所示。<Route path={`${match.url}/keyword`} component={Topic}/>
还检查反应路由器培训
回答by Mushfiq
Use Like the following:
使用如下：
class App extends Component {
render() {
return (
<BrowserRouter>
<Link to='/create'> Create </Link>
<Link to='/ExpenseDashboard'> Expense Dashboard </Link>
<Switch>
<Route path='/ExpenseDashboard' component={ExpenseDashboard} />
<Route path='/create' component={AddExpensePage} />
<Route path='/Edit' component={EditPage} />
<Route path='/Help' component={HelpPage} />
<Route component={NoMatch} />
</Switch>
</BrowserRouter>
);
}
}
See more @ Switch on GitHub
查看更多 @在 GitHub 上切换
