React Router v4 在表单提交时重定向 [英] React Router v4 Redirecting on form submit

问题描述

全新的反应，在点击登录"页面上的提交后尝试重定向到主页".尝试按照反应路由器教程进行操作.

当我单击表单上的提交按钮并控制台记录状态和 fakeAuth.isAuthenticated 时，它们都返回 true.但是，重定向并未触发.

Login.js

class 登录扩展组件 {构造函数(道具){超级(道具)；this.state = {门户 ID: "",密码: ""，redirectToReferrer: 假}this.handleSubmit = this.handleSubmit.bind(this);}处理提交(e){fakeAuth.authenticate(() => {this.setState({门户ID:this.refs.portalId.value，密码:this.refs.password.value，redirectToReferrer: 真})})e.preventDefault();}使成为() {const redirectToReferrer = this.state.redirectToReferrer;if (redirectToReferrer === true) {<重定向到="/home"/>}

Routes.js

export const fakeAuth = {isAuthenticated: 假,认证(CB){this.isAuthenticated = 真设置超时(CB，100)},退出(CB){this.isAuthenticated = false设置超时(CB，100)}}const PrivateRoute = ({ component: Component, ...rest }) =>(<Route {...rest} render={() =>(fakeAuth.isAuthenticated === true?<组件{...this.props}/>:<重定向到=/"/>)}/>)导出默认值 () =>(<浏览器路由器><div><导航栏/><开关><Route path="/" 精确组件={登录}/><Route path="/register" 精确组件={Register}/><Route path="/home" 精确组件={Home}/></开关>

</BrowserRouter>);

解决方案

你必须在 render 方法中返回 Redirect(否则它不会被渲染，因此不会发生重定向):

 render() {const redirectToReferrer = this.state.redirectToReferrer;如果(重定向到Referrer){return <重定向到=/home"/>}//... 其余的渲染方法代码}

Brand new to react, Attempting to redirect to a "homepage" after clicking submit on a "login" page. Tried to follow the react router tutorial.

When I click the submit button on the form and console log the state and fakeAuth.isAuthenticated, they both return true. However, the redirect is not firing.

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>
);

解决方案

You have to return Redirect in render method (otherwise it will not be rendered and as a result redirection will not happen):

  render() {
        const redirectToReferrer = this.state.redirectToReferrer;
        if (redirectToReferrer) {
            return <Redirect to="/home" />
        }
        // ... rest of render method code
   }

这篇关于React Router v4 在表单提交时重定向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！