reactjs - React 路由器或链接未渲染

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 的上述帖子提供了解决方案。但本着更清晰地呈现解决方案的精神，我将复制并粘贴使 React Router 与 Redux 和其他中间件良好配合的相关代码。

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



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