繁体   English   中英

React-router-dom v4不呈现组件

[英]React-router-dom v4 does not render the component

我有一个复杂的问题(我想是的)。 我正在使用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是更改项目中的某些内容并热重新加载它。 否则,将无法强制其渲染路线。

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

我将其发布为答案,因为OP确认了有效性。

React路由器文档建议在使用Redux connect()时使用withRouter

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM