Question

我想使用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;

Answer 1

解决方案很简单。正在显示主页，因为您的路径与listONEA = df['ONEA'].tolist() for i in listONEA: print(i)和/都匹配。为避免这种情况，请使用精确，因为仅当精确路径匹配时，它才会渲染组件。因此更新后的代码将是

/fruit/search

多个BrowserRouter显示多个组件

1 个答案: