Javascript 来自react路由器dom的重定向不是重定向

提交此表单后，我希望能够将用户重定向到下一页（posts页）

然而，我试图创建一个

}

，但似乎不起作用。几天前它对我来说还不错，但现在我不知道我错过了什么

这是我正在提交表单的当前文件，希望用户在提交表单后被重定向

Auth.js

import React, { useState } from 'react'
import { actions } from './sagaSlice';
import { connect } from 'react-redux';
import { BrowserRouter as Redirect } from "react-router-dom";

const Auth = (props) => {
    const [formData, setFormData] = useState({
        username: '',
        email: '',
        password: ''
    });

    const handleFormData = e =>
        setFormData({
            ...formData,
            [e.target.name]: e.target.value
        });

    const { username, email, password } = formData;

    const handleSubmit = e => {
        e.preventDefault();
        props.login({
            username,
            email,
            password
        });
    }

    return (
        <div>
            <form
                onSubmit={handleSubmit}
            >
                <input
                    type="text"
                    name="username"
                    placeholder="Username"
                    onChange={handleFormData}
                    value={username}
                />
                <input
                    type="email"
                    name="email"
                    placeholder="Email"
                    onChange={handleFormData}
                    value={email}
                />
                <input
                    type="password"
                    name="password"
                    placeholder="Password"
                    onChange={handleFormData} value={password} />
                <button
                    type="submit"
                    onClick={() => <Redirect to="/posts" />}
                >
                    Login
                </button>
            </form>
            <button onClick={() => <Redirect to="/posts" />}>Go to posts</button>
        </div>
    );
}

const mapToProps = (state, ownProps) => {
    return ({
        user: state.user
    })
}

export default connect(mapToProps, actions)(Auth);

import React from 'react';
import { connect } from 'react-redux';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import Auth from '../Auth/Auth';
import PostsView from '../PostsView/PostsView';
import PostViewSingle from '../PostViewSingle/PostViewSingle';

const App = (props) => {
    return (
        <div className="container">
            <Router>
                <Switch>
                    <Route path="/login" component={Auth} />
                    <Route path="/posts" component={PostsView} />
                    <Route path="/post/:id" component={PostViewSingle} />
                </Switch>
            </Router>
        </div>

    );
}

const mapToProps = (state) => {
    return ({
        isAuthenticated: state.user.isAuthenticated
    })
}

export default connect(mapToProps, null)(App);

import React，{useState}来自“React”
从“/sagaSlice”导入{actions}；
从'react redux'导入{connect}；
从“react router dom”导入{BrowserRouter as Redirect}；
const Auth=（道具）=>{
常量[formData，setFormData]=useState({
用户名：“”，
电子邮件：“”，
密码：“”
});
常量handleFormData=e=>
setFormData({
…表格数据，
[e.target.name]：e.target.value
});
const{username，email，password}=formData；
常量handleSubmit=e=>{
e、 预防默认值（）；
道具登录({
用户名，
电子邮件，
密码
});
}
返回(
}
>
登录
}>投递
);
}
常量mapToProps=（state，ownProps）=>{
返回({
用户：state.user
})
}
导出默认连接（mapToProps，actions）（Auth）；

还有我的App.js文件

App.js

import React, { useState } from 'react'
import { actions } from './sagaSlice';
import { connect } from 'react-redux';
import { BrowserRouter as Redirect } from "react-router-dom";

const Auth = (props) => {
    const [formData, setFormData] = useState({
        username: '',
        email: '',
        password: ''
    });

    const handleFormData = e =>
        setFormData({
            ...formData,
            [e.target.name]: e.target.value
        });

    const { username, email, password } = formData;

    const handleSubmit = e => {
        e.preventDefault();
        props.login({
            username,
            email,
            password
        });
    }

    return (
        <div>
            <form
                onSubmit={handleSubmit}
            >
                <input
                    type="text"
                    name="username"
                    placeholder="Username"
                    onChange={handleFormData}
                    value={username}
                />
                <input
                    type="email"
                    name="email"
                    placeholder="Email"
                    onChange={handleFormData}
                    value={email}
                />
                <input
                    type="password"
                    name="password"
                    placeholder="Password"
                    onChange={handleFormData} value={password} />
                <button
                    type="submit"
                    onClick={() => <Redirect to="/posts" />}
                >
                    Login
                </button>
            </form>
            <button onClick={() => <Redirect to="/posts" />}>Go to posts</button>
        </div>
    );
}

const mapToProps = (state, ownProps) => {
    return ({
        user: state.user
    })
}

export default connect(mapToProps, actions)(Auth);

import React from 'react';
import { connect } from 'react-redux';
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import Auth from '../Auth/Auth';
import PostsView from '../PostsView/PostsView';
import PostViewSingle from '../PostViewSingle/PostViewSingle';

const App = (props) => {
    return (
        <div className="container">
            <Router>
                <Switch>
                    <Route path="/login" component={Auth} />
                    <Route path="/posts" component={PostsView} />
                    <Route path="/post/:id" component={PostViewSingle} />
                </Switch>
            </Router>
        </div>

    );
}

const mapToProps = (state) => {
    return ({
        isAuthenticated: state.user.isAuthenticated
    })
}

export default connect(mapToProps, null)(App);

从“React”导入React；
从'react redux'导入{connect}；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“../Auth/Auth”导入Auth；
从“../PostsView/PostsView”导入PostsView；
从“../PostViewSingle/PostViewSingle”导入PostViewSingle；
常量应用=（道具）=>{
返回(
);
}
常量mapToProps=（状态）=>{
返回({
isAuthenticated:state.user.isAuthenticated
})
}
导出默认连接（mapToProps，null）（应用程序）；

如果没有一个简单的例子，很难确定到底出了什么问题。也就是说，有几件事可能会对你有所帮助：

• 您（可能）错误地导入了

  重定向

  组件（您将

  浏览器路由器导入为重定向

  ）。应该（同样，可能）从“react router dom”更改为

  import{Redirect}，假设您仍然需要
  重定向
  组件
  
  

• 您希望在提交表单后重定向用户。因此，重定向逻辑应该在

  handleSubmit

  回调中。从那里你可以处理重定向

以下是

Auth

组件的更新版本：

import { Link, Redirect } from "react-router-dom";

const Auth = (props) => {
    const [formData, setFormData] = useState({
        username: '',
        email: '',
        password: ''
    });

    const handleFormData = e =>
        setFormData({
            ...formData,
            [e.target.name]: e.target.value
        });

    const { username, email, password } = formData;

    const handleSubmit = e => {
        e.preventDefault();
        props.login({
            username,
            email,
            password
        });
        
        // Perhaps also check if login was successful?
        history.push("/posts");
    }

    return (
        <div>
            <form
                onSubmit={handleSubmit}
            >
                <input
                    type="text"
                    name="username"
                    placeholder="Username"
                    onChange={handleFormData}
                    value={username}
                />
                <input
                    type="email"
                    name="email"
                    placeholder="Email"
                    onChange={handleFormData}
                    value={email}
                />
                <input
                    type="password"
                    name="password"
                    placeholder="Password"
                    onChange={handleFormData} value={password} />
                <button type="submit">
                    Login
                </button>
            </form>
            <Link to="/posts">Go to posts</Link>
        </div>
    );
}

从“react router dom”导入{Link，Redirect}；
const Auth=（道具）=>{
常量[formData，setFormData]=useState({
用户名：“”，
电子邮件：“”，
密码：“”
});
常量handleFormData=e=>
setFormData({
…表格数据，
[e.target.name]：e.target.value
});
const{username，email，password}=formData；
常量handleSubmit=e=>{
e、 预防默认值（）；
道具登录({
用户名，
电子邮件，
密码
});
//也许还要检查登录是否成功？
历史推送（“/posts”）；
}
返回(
登录
投递
);
}

它从来都不是这样工作的。您不能通过单击按钮返回JSX。你有两个选择。1.通过单击，可以设置状态并有条件地渲染

重定向

组件。2.您可以使用

（）=>历史记录，而不是
重定向
。推送（“/posts”）

这是否回答了您的问题@devserkan

（）=>history.push（“/posts”）

会执行此操作，但当它重定向到

/posts

路由时，它不会在screen@devserkan在搞乱了

历史记录后，push想出了解决方案。只需在submitHandler中添加该行，而不是在submit按钮的
onClick
上执行