我想用basename
来分离组件。我也有全局 url,所以我最终使用了 3 个BrowserRouter
s。这会导致显示多个内容。如果我去/fruit/search,它会显示以下内容Homepage
组件和FruitSearch
成分。我究竟如何使用多个BrowserRouter
s?
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
。
为了避免这种情况,请使用精确,因为它仅在精确路径匹配时才会渲染组件。
所以更新后的代码是
<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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)