我想使用 basename
来分隔组件。我也有全局 url,所以我最终使用了 3 个 BrowserRouter
。这会导致显示多个内容。如果我去/fruit/search,它会同时显示 Homepage
组件和 FruitSearch
组件的内容。我究竟该如何使用多个 BrowserRouter
?
class App extends Component {
render() {
return (
<div>
<Header/>
<BrowserRouter basename='/vegetable'>
<Switch>
<Route exact path='/search' component={VegetableSearch}/>
<Route exact path='/contact/:sellerId' component={ContactSeller}/>
</Switch>
</BrowserRouter>
<BrowserRouter basename='/fruit'>
<Switch>
<Route exact path='/search' component={FruitSearch}/>
<Route exact path='/contact/:sellerId' component={ContactSeller}/>
</Switch>
</BrowserRouter>
<BrowserRouter>
<div>
<Route path='/login' component={Login}/>
<Route path='/register' component={Registration}/>
<Route path='/about' component={AboutUs}/>
<Route path='/faq' component={Faq}/>
<Route path='/' component={Homepage}/>
</div>
</BrowserRouter>
<Footer/>
</div>
);
}
}
export default App;
最佳答案
解决方法很简单。主页正在呈现,因为您的路径同时匹配 /
和 /fruit/search
。
为避免这种情况,请使用 exact ,因为它只会在精确路径匹配时才渲染组件。
所以更新后的代码将是
<BrowserRouter>
<div>
<Route exact path="/login" component={Login} />
<Route exact path="/register" component={Registration} />
<Route exact path="/about" component={AboutUs} />
<Route exact path="/faq" component={Faq} />
<Route exact path="/" component={Homepage} />
</div>
</BrowserRouter>
关于reactjs - 多个 BrowserRouter 显示多个组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52481536/