web-dev-qa-db-fra.com

React Router v4 Redirection sur le formulaire soumis

Tout nouveau pour réagir, Tentative de redirection vers une "page d'accueil" après avoir cliqué sur soumettre sur une page de "connexion". J'ai essayé de suivre le didacticiel du routeur React.

Lorsque je clique sur le bouton Envoyer du formulaire et que la console enregistre l'état et fakeAuth.isAuthenticated, ils renvoient tous les deux true. Cependant, la redirection ne se déclenche pas.

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>
);
reactjsreact-router-v4
10
Vincent Nguyen

Vous devez renvoyer Redirect dans la méthode de rendu (sinon elle ne sera pas rendue et, par conséquent, la redirection ne se produira pas):

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

Je suis maintenant en mesure de rediriger vers la "page d'accueil" en échangeant <Redirect to="/home" /> Avec this.props.history.Push("/home"); en utilisant withRouter. Je ne sais pas pourquoi la première méthode ne fonctionnerait pas.

2
Vincent Nguyen