React Router v4 在表单提交时重定向

Question

全新的反应，在 "login" 页面上单击提交后尝试重定向到 "homepage"。尝试遵循 React 路由器教程。

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

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

Answer 1

你必须在 render 方法中 return Redirect （否则它不会被渲染，结果重定向也不会发生）：

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

Answer 2

我现在可以通过使用 withRouter 将 <Redirect to="/home" /> 换成 this.props.history.push("/home"); 来重定向到 "homepage"。不知道为什么第一种方法行不通。

Answer 3

当我们在路由器声明之外使用时。你可以只使用

this.props.history.push('/url')

在你的函数调用中。应该与 react-router-dom

一起工作

Answer 4

对于使用 Hooks 的人，请看这里 -> https://reactrouter.com/web/api/Hooks/usehistory 使用示例：

import { useHistory } from "react-router-dom";
let history = useHistory();
        
const onSubmit = () => {
    //code
    history.push(`/${link}/${object.id}`)
}

Answer 5

useNavigate 钩子对我有用。在 react-router-dom v6 中，useHistory 被替换为 useNavigate。这是为我解决问题的代码：

import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
const onSubmit = () => {
    e.preventDefault();
    // do what you want with your form data
    navigate('/my-path');
}

React Router v4 在表单提交时重定向

React Router v4 Redirecting on form submit

reactjs

react-router-v4