javascript - 来自react-router-dom的BrowserRouter不渲染组件

Question

我尝试将 BrowserRouter 移出我的组件。我的应用程序如下所示:

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
    }
  }

  render() {
    return (
          <BrowserRouter>
             <main>
               <Menu />
               <Switch>
                 <Route exact path="/about" component = {About} />
                 <Route exact path="/admin" component = {BooksForm} />
                 <Route exact path="/cart" component = {Cart} />
                 <Route exact path="/" component = {BookList} />
               </Switch>
               <Footer />
             </main>
          </BrowserRouter>
    );
  }
}

一切都工作正常。但是当我拉起 BrowserRouter 时，我的 index.js 将如下所示:

const renderApp = () => (
  <Provider store={createStoreWithMiddleware(reducers)}>
    <BrowserRouter>
        <App/>
    </BrowserRouter>
  </Provider>
)

const root = document.getElementById('app')
render(renderApp(), root)

它停止工作了。当我单击其中一个链接时，网址会发生变化，但我的应用程序中没有任何变化。仅当我重新加载页面时它才会呈现新组件。如何在不将路由器组件放置在与 Switch 相同的组件中的情况下使其工作？

Answer 1

如果不查看其余代码就很难判断。您是否使用正确的 react 路由器<Link>是？我假设你没有 <BrowserRouter>元素在两个组件中，无法想象嵌套它们会有什么好处。

我使用的是旧版本的react-router，所以我是第一次看到其中一些示例，但看起来您不需要 exact所有这些的关键字 <Route>位于<Switch>内-- 开关保证只有其中一个会进行数学运算。