我有一个有点复杂的问题(我是这么认为的)。我正在使用 React-router-dom v4。我想实现私有(private)路线。我有一个登录页面,我在其中调用 API 进行身份验证,然后在成功时将我的应用程序重定向到另一个页面。到现在为止一切正常。当我尝试将我的应用程序重定向到私有(private)路由下的另一个页面时,问题就开始了。
这是我的 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 路由器 documentation suggests在使用 Redux connect()
withRouter
import { withRouter } from 'react-router-dom'
export default withRouter(connect(mapStateToProps)(Something))
关于javascript - React-router-dom v4 不渲染组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51735468/