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

【问题标题】：BrowserRouter from react-router-dom doesn't render components来自 react-router-dom 的 BrowserRouter 不渲染组件
【发布时间】：2017-10-12 15:15:15
【问题描述】：

我试图将 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 放在同一组件中的情况下使其工作？

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

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

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

【讨论】：

我的问题通过从<a> 切换到<Link> 解决了。谢谢！

【解决方案2】：

好的，我已经让它再次工作了。从 redux 连接是导致问题的原因，withRouter 解决了它

【讨论】：