反应路由器或链接未呈现答案

【问题标题】：React Router or Link Not Rendered反应路由器或链接未呈现
【发布时间】：2018-04-15 18:32:15
【问题描述】：

我在 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>
    );
  }

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

我做错了什么？

【问题讨论】：

我使用 create-react-app 尝试了您的代码，效果很好。你使用的是 create-react-app 还是 webpack-dev-server？
create-react-app 我正在使用 Redux
这是应该包含在问题/问题中的其他代码：export default connect(mapStateToProps,)(App)
你的工作可能是因为它是普通的旧 React 而不是 React with Redux ...这是我的猜测...

标签： reactjs react-redux react-router-redux react-router-dom

【解决方案1】：

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

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



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

【讨论】：

我猜，当你的 App 组件使用 redux（和一个 AppContainer），并且它在 Router 组件之外，那么这是必需的。为我工作。

【解决方案2】：

来自 React Router 文档，

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

组件通过以下方式连接到 redux 连接（）（比较）。

组件不是“路由组件”，意味着它不是这样渲染的：<Route component={SomeConnectedThing}/>

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

所以使用render 道具可能是个问题。所以：

要么将render 替换为component，要么
尝试他们的解决方案，使用withRouter（即使在那里你也必须将它们变成组件）

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

【讨论】：

我认为，您应该阅读有关 react-router-dom 的文档：reacttraining.com/react-router/web/example/basic
您提供的链接很棒。但是，似乎很难找到其他好东西。我去了 reacttraining.com，似乎没有链接可以导致 reactraining.com/react-router 以及比这更深的页面。您是否需要注册课程才能查看这些课程的目录？我想更多地探索那个网站....
不不...该站点包含所有与 React Router 相关的官方文档，无需注册任何课程。转到reacttraining.com/react-router

【解决方案3】：

在我的情况下，这工作正常。如果您将导入路由器并将两者链接在一起。

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

【讨论】：

【解决方案4】：

Link 和Router 都是必须的。

不工作！

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

在我的情况下工作。

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

【讨论】：