反应路由器或链接未呈现 [英] React Router or Link Not Rendered

问题描述

我在 redux 应用中使用 react-router-dom.

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

ReactDOM.render(<提供者商店={商店}><浏览器路由器><应用程序/></BrowserRouter></提供者>, document.getElementById('root'));

然后在我的 App.js 中:

render() {返回 (
<路由精确路径=/";渲染={()=>{返回 (<div>{this.props.categories.map((category)=>{console.log('类别', 类别)返回 (<Link key={category.name} to=/category";>{category.name}</Link>)})}
)}}/><路由路径="/category";渲染={()=>{console.log('类别路径 this.props', this.props)return (<p>Category 是任何东西</p>)}}/>

);}

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

我做错了什么?

解决方案

以上 Dane 的帖子提供了解决方案.但本着更清晰地呈现解决方案的精神，我将复制并粘贴使 react router 与 redux 和其他中间件兼容的相关代码.

import { withRouter } from 'react-router-dom'导出默认 withRouter(connect(mapStateToProps，)(应用程序))

I am using react-router-dom in a redux app.

This is my initial setup in index.js:

ReactDOM.render(

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

  , document.getElementById('root'));

Then in my App.js I have:

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

I would think that whenever I click any of the Links displayed the browser would automatically know how to render the new Route path /category but for some reason it does not.

What am I doing wrong?

解决方案

The above post by Dane has the solution. But in the spirit of presenting the solution with more clarity, I will copy and paste the relevant codes that made react router work well with redux and other middleware.

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



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

这篇关于反应路由器或链接未呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！