我最近在我的路由中实现了react-router Switch组件,以便呈现NoMatch组件(这只是一个404错误组件)。然而,在我的路线中实现这一点之后,我注意到在我的主页上只有1个组件将呈现,标题组件。
Heading和SearchBar都应呈现为相同的路径。
我的代码如下:
const routes = [
{
path: "/",
exact: true,
component: () => <Heading />
},
{
path: "/",
exact: true,
component: () => <SearchBar />
},
{
component: NoMatch
}
];
class App extends Component {
render() {
return (
<div>
<BrowserRouter>
<div>
<MenuBar />
<Switch>
{routes.map((route, index) =>
<Route
key={index}
path={route.path}
exact={route.exact}
component={route.component}
/>
)}
</Switch>
</div>
</BrowserRouter>
</div>
);
}
}
我注意到如果删除Switch组件,那么一切都会正常渲染,但NoMatch组件也会渲染到路径。
问题:为什么我不能在Switch内部的同一路径上渲染多个组件?当我需要在“/”路径上呈现标题和SearchBar组件时,如何解决此问题?
答案 0 :(得分:2)
我认为你错过了Switch如何工作。
Switch将开始寻找匹配的Route,只要找到匹配,它就会停止寻找匹配并渲染该特定组件。
始终定义唯一路径,如果要为同一路径渲染多个组件,则用div包装所有路径。
像这样写:
const routes = [
{
path: "/",
exact: true,
component: () => <div> <Heading /> <SearchBar /> </div>
},
{
component: NoMatch
}
];
答案 1 :(得分:0)
Switch组件只允许一条路由 - 基本上每条子路由都有一个隐式exact
属性。
所以你需要为了你的目的删除它,你的实验证实了