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)

它停止工作了。 當我單擊鏈接之一時，URL會更改，但我的應用程序中沒有更改。 僅當我重新加載頁面時，它才會呈現新的組件。 如何在不將路由器組件與Switch放在同一組件的情況下使其工作？

Answer 1

不看其余代碼就很難說出來。 您使用的是正確的react-router <Link>嗎？ 我假設您在兩個組件中都沒有<BrowserRouter>元素，無法想象嵌套它們會起到什么作用。

我使用的是舊版本的react-router，所以我是第一次看到其中一些示例，但是看起來您不需要在<Switch>所有這些<Route>上使用exact關鍵字-開關保證只有其中一個會數學。

Answer 2

好吧，我讓它再次工作了。 來自redux的連接導致了問題，withRouter解決了