Question

我在redux应用程序中使用react-router-dom。

这是我在index.js中的初始设置：

ReactDOM.render(

  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>

  , document.getElementById('root'));

然后在我的App.js中我有：

render() {
    return (
      <div className="App">
        <Route exact path="/" render={ () => {
          return (
              <div>
                {
                  this.props.categories.map((category)=>{
                    console.log('category', category)
                    return (
                          <Link key={category.name} to="/category"  >{category.name}</Link>
                    )
                  })
                }
              </div>
          )

          }}
        />

        <Route path="/category" render={ () => {
          console.log('category path this.props', this.props)
          return (<p>Category is whatever</p>)
        }}
        />

      </div>
    );
  }

我认为每当我点击显示的任何链接时，浏览器都会自动知道如何呈现新的路径路径/类别但由于某种原因它不会。

我做错了什么？

Answer 1

Dane的上述帖子有解决方案。但本着更清晰地呈现解决方案的精神，我将复制并粘贴使反应路由器与redux和其他中间件一起正常工作的相关代码。

import { withRouter } from 'react-router-dom'



export default withRouter(connect(
  mapStateToProps,
)(App))

Answer 2

来自React Router docs，

通常，React Router和Redux可以很好地协同工作。   有时，应用程序可能有一个不更新的组件   当位置改变时（子路线或活动的导航链接不会   更新）。如果出现这种情况：


组件连接到redux via   连接（）（对照）。

该组件不是“路由组件”，意思是它   不是这样呈现：<Route component={SomeConnectedThing}/>

在   问题是Redux实现了shouldComponentUpdate而没有   如果没有收到道具，则表明任何事情已经改变   路由器。这很容易解决。找到你连接的地方   您的组件并将其包装在withRouter。
中

所以使用render道具可能会有问题。所以：

将render替换为component或
使用withRouter尝试他们的解决方案（即使你必须将它们变成组件）

https://reacttraining.com/react-router/core/guides/redux-integration/blocked-updates

Answer 3

就我而言，这工作正常。如果您要导入路由器并将两者链接在一起。

import { BrowserRouter as Router, Link } from "react-router-dom";

Answer 4

链接和路由器都是强制性的。

不起作用！

import { BrowserRouter as Link } from "react-router-dom";

以我的情况工作。

import { BrowserRouter as Router, Link } from "react-router-dom";

反应路由器或链接不工作

4 个答案: