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-router <Link>吗？我假设你在两个组件中都没有<BrowserRouter>元素，无法想象嵌套它们会有任何好处。

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

Answer 2

好吧，我已经让它恢复了工作。从redux连接引起了问题，而且路由器解决了它

来自react-router-dom的BrowserRouter不呈现组件

2 个答案: