我想要的组件树如下 - 登录 -主页 - 联系 -关于
Contact和About是Home的子代。 这是我的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>
)
}
Contact组件只需要呈现“你好文本”。
答案 0 :(得分:2)
要进行嵌套路由,您需要删除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”将更加容易。