web-dev-qa-db-ja.com

Reactフォーム送信時のルーターv4リダイレクト

「ログイン」ページで「送信」をクリックした後、「ホームページ」へのリダイレクトを試みて、反応する真新しい。反応ルーターのチュートリアルに従うことを試みました。

フォームの送信ボタンをクリックし、コンソールで状態と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>
);
reactjsreact-router-v4
10
Vincent Nguyen

RenderメソッドでRedirectを返す必要があります（そうしないとレンダリングされず、結果としてリダイレクトは発生しません）。

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

withRouterを使用して_<Redirect to="/home" />_をthis.props.history.Push("/home");と交換することで、「ホームページ」にリダイレクトできるようになりました。しかし、なぜ最初の方法が機能しないのかはわかりません。

2
Vincent Nguyen