React-router-dom v4 不渲染组件答案

【问题标题】：React-router-dom v4 does not render the componentReact-router-dom v4 不渲染组件
【发布时间】：2019-01-15 01:21:35
【问题描述】：

我有一个有点复杂的问题（我想是的）。我正在使用 React-router-dom v4。我想实现私有路由。我有一个登录页面，我在其中调用 API 进行身份验证，然后当它成功时，我将我的应用程序重定向到另一个页面。到目前为止，一切正常。当我尝试将我的应用程序重定向到私有路由下的另一个页面时，问题就开始了。

这是我的 NavigationContainer 渲染方法（连接了一个 Redux，它为我提供了有关 userData 状态的数据：

render() {
  const { userData } = this.props

  return(
    <div style={{height: '100%', width: '100%'}}>
      <Switch>
        <Route exact path="/" component={LoginScreen} />
        <PrivateRoute path='/dashboard' authenticated={userData.isLoggedIn} component={PrivateRouteContainer} props={this.state} />
        <Route component={NotFoundPage} />
      </Switch>
    </div>
  )
}

我的 PrivateRoute 实现如下所示：

const PrivateRoute = ({ component: Component, authenticated, ...rest }) => {
    return(<Route {...rest} render={(props) => authenticated === true 
        ? <Component {...props} />
        : <Redirect to='/' />
    } />)
  }

最后我的 PrivateRouteContainer 是这样实现的：

export default class PrivateRoute extends Component {

onMenuClick = (path) => {
    this.props.history.push('/dashboard' + path)
}

render() {
    return(
        <div>
            <NavigationBar onMenuClick={this.onMenuClick} />

                <Switch>
                    <Route exact path='/dashboard' component={MainPage} />
                    <Route path='/dashboard/loadFile' component={LoadFile} />
                </Switch>
            </div>
        )
    }
}

强制应用重定向到路径：dashboard/loadFile 的唯一方法是更改项目中的某些内容并热重新加载它。否则，不可能强制它渲染路由。

有人可以给我一些建议吗？我不知道问题出在哪里。

【问题讨论】：

点击NavigationBar会发生什么？ URL 改变了，但是没有渲染新的组件？
@Tholle 正是这种情况。路径变了但是组件没有渲染，控制台没有错误
在我看来，您的应用程序中有多个BrowserRouter 组件。如果您在例如创建 Minimal, Complete, and Verifiable example CodeSandbox。很难说否则会出什么问题。
我会看看你建议的事情。如果我无法找到多个Browser Router，那么我将准备示例。非常感谢您查看问题
你提到这是 Redux 连接的。是否可以像实现这里建议的那样简单：reacttraining.com/react-router/core/guides/redux-integration？我遇到了类似的问题，解决方案是用withRouter 包装connect() 语句

标签： javascript reactjs react-router-v4 react-router-dom

【解决方案1】：

自从 OP 确认有效性后，我将其作为答案发布。

使用 Redux 时使用 withRouter 反应路由器 documentation suggests connect()

import { withRouter } from 'react-router-dom'
export default withRouter(connect(mapStateToProps)(Something))

【讨论】：