反应路由器或链接未呈现

Posted 2023-02-22

【中文标题】反应路由器或链接未呈现

【英文标题】：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 ...这是我的猜测...

【参考方案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";