在
react-router v4，你可以利用
render prop来
Route与生命周期方法一起更换
onEnter功能存在于反应路由器V3。
查看此答案以获取更多详细信息：
react-router v4中的onEnter
prop
但是，由于您要做的只是在onEnter道具中进行身份验证，因此您可以轻松创建一个执行此操作的HOC
const RequireAuth = (Component) => { return class App extends Component { componentWillMount() { const getToken = localStorage.getItem('token'); if(!getToken) { this.props.history.replace({pathname: '/'}); } } render() { return <Component {...this.props} /> } }}export { RequireAuth }并像这样使用
<Route path={"/Dashboard"} component={RequireAuth(Dashboard)}/>编辑：如果您需要进行网络呼叫以查找是否经过身份验证的使用，则可以将HOC编写为
const RequireAuth = (Component) => { return class App extends Component { state = { isAuthenticated: false, isLoading: true } componentDidMount() { AuthCall().then(() => { this.setState({isAuthenticated: true, isLoading: false}); }).catch(() => { this.setState({isLoading: false}); }) } render() { const { isAuthenticated, isLoading } = this.state;if(isLoading) { return <div>Loading...</div>}if(!isAuthenticated) { return <Redirect to="/login" />}return <Component {...this.props} /> } }}export { RequireAuth }更新：
除了HOC，您还可以选择
PrivateRoute类似
const PrivateRoute = ({component: Component, isAuthenticated, isLoading, ...rest }) => { if(isLoading) { return <div>Loading...</div>}if(!isAuthenticated) { return <Redirect to="/login" />}return <Component {...this.props} /> } } } export { PrivateRoute };你可以像这样使用它
class App extends Component { state = { isAuthenticated: false, isLoading: true } componentDidMount() { AuthCall().then(() => { this.setState({isAuthenticated: true, isLoading: false}); }).catch(() => { this.setState({isLoading: false}); }) } render() { <Router> <div> <Route exact path={"/"} component={Home} /> <Route path={"/SignUp"} component={SignUp} /> <Route path={"/SignIn"} component={SignIn} /> <PrivateRoute path={"/Dashboard"} component={Dashboard} isAuthenticated={this.state.isAuthenticated} isLoading={this.isLoading}/> </div></Router> } }
