全新的响应,在“登录”页面上单击“提交”后尝试重定向到“主页”。尝试遵循React Router教程。
当我单击表单上的提交按钮并在控制台上记录状态和fakeAuth.isAuthenticated时,它们都返回true。但是,重定向不会触发。
Login.js
class Login extends Component { constructor(props) { super(props); this.state = { portalId: "", password: "", redirectToReferrer: false } this.handleSubmit = this.handleSubmit.bind(this); } handleSubmit(e) { fakeAuth.authenticate(() => { this.setState({ portalId: this.refs.portalId.value, password: this.refs.password.value, redirectToReferrer: true }) }) e.preventDefault(); } render() { const redirectToReferrer = this.state.redirectToReferrer; if (redirectToReferrer === true) { <Redirect to="/home" /> }
Routes.js
export const fakeAuth = { isAuthenticated: false, authenticate(cb) { this.isAuthenticated = true setTimeout(cb, 100) }, signout(cb) { this.isAuthenticated = false setTimeout(cb, 100) } } const PrivateRoute = ({ component: Component, ...rest }) => ( <Route {...rest} render={() => ( fakeAuth.isAuthenticated === true ? <Component {...this.props}/> : <Redirect to="/" /> )}/> ) export default () => ( <BrowserRouter> <div> <Navbar /> <Switch> <Route path="/" exact component={Login} /> <Route path="/register" exact component={Register} /> <Route path="/home" exact component={Home} /> </Switch> </div> </BrowserRouter> );
您必须返回Redirectrender方法(否则将不会被渲染,因此将不会发生重定向):
Redirect
render() { const redirectToReferrer = this.state.redirectToReferrer; if (redirectToReferrer === true) { return <Redirect to="/home" /> } // ... rest of render method code }