[英]How to implement nested Routing (child routes) in react router v4?
我想要的组件树如下-登录-主页-联系-关于
联系人和关于是家庭的孩子。 这是我的App.js,
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<Route exact path="/home" component={HomeView} />
</div>
</BrowserRouter>
);
}
}
render(<App />, document.getElementById('root'));
这是家
export const HomeView = ({match}) => {
return(
<div>
<NavBar />
Here i want to render the contact component, (Navbar need to stay)
</div>
)
}
这是我的导航栏
export const NavBar = () => {
return (
<div>
<Link to="/home">Home</Link>
<Link to="/home/contact">Contact</Link>
<hr/>
</div>
)
}
联系人组件只需要呈现“你好文本”。
要进行嵌套路线,您需要删除exact
:
<Route path="/home" component={HomeRouter} />
并添加一些路线:
export const HomeRouter = ({match}) => {
return(
<div>
<NavBar />
{/* match.path should be equal to '/home' */}
<Switch>
<Route exact path={match.path} component={HomeView} />
<Route exact path={match.path + '/contact'} component={HomeContact} />
<Switch>
</div>
)
}
您不需要在嵌套的路由中使用match.path
,但是这样一来,在您决定更改路由时,将所有内容从“ / home”移动到“ / new / home”将更加容易。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.