Javascript 登录后重定向url（react js）

我是个初学者。我陷入这个问题好几天了。我不知道在登录成功（没有验证错误）时如何重定向到路径/用户。如果有什么不清楚的，请告诉我。这是我第一次问有关stackoverflow的问题。请帮助：(

//app.js

import React from "react"
import ValidationLog from "./ValidationLog"
import PostList from "./PostList"
import  {BrowserRouter as Router,Route,Switch,Redirect}  from "react-router-dom"

function App() {
  

  return (
    <Router>
      <div className="App">

        <Switch>
          <Route exact path="/" component={ValidationLog}></Route>
          <Route path="/users" component={PostList}></Route>
        </Switch>
          
      </div>
    </Router>
  )
  
}
export default App

import ValidationLog,{islogin} from "./ValidationLog"

<Route exact path="/">
  {islogin ? <Redirect to="/users" /> : null}
</Route>

//app.js

import React from "react"
import ValidationLog from "./ValidationLog"
import PostList from "./PostList"
import  {BrowserRouter as Router,Route,Switch,Redirect}  from "react-router-dom"

function App() {
  

  return (
    <Router>
      <div className="App">

        <Switch>
          <Route exact path="/" component={ValidationLog}></Route>
          <Route path="/users" component={PostList}></Route>
        </Switch>
          
      </div>
    </Router>
  )
  
}
export default App

import ValidationLog,{islogin} from "./ValidationLog"

<Route exact path="/">
  {islogin ? <Redirect to="/users" /> : null}
</Route>

import ValidationLog，{islogin}来自“/ValidationLog”
{islogin？：null}

您可以使用withRouter来完成

从react router dom导入withRouter，并在导出中使用withRouter封装组件

然后，您可以使用这个.props.history.push（“/newurl”）进行导航

从“React”导入React
从“Formik”导入{Formik}
从“Yup”导入*为Yup
//使用路由器导入
从“react Router dom”导入{BrowserRouter as Router，Route，Switch，Redirect，withRouter}
常量验证日志=（道具）=>(
{
设置超时（（）=>{
//这将重定向到/users，确保您使用路由器获得导入（检查最后一行导出）
props.history.push（“/users”）；
}, 500);
}}
validationSchema={Yup.object（）.shape({
电子邮件：Yup.string（）
.email（）
.必需（“必需”），
密码：Yup.string（）
.必填（“未提供密码”）
.min（8，“密码必须至少包含8个字符。”）
})
}
>
{props=>{
常数{
价值观
感动的，
错误，
提交，
handleChange，
车把，
手推
}=道具
返回(
登录以查看我们的用户池
电邮：
{errors.email&&touch.email&（{errors.email}）}
密码：
{errors.password&&touch.password&&（{errors.password}）}
登录
)
}}
)
//变化
使用路由器导出默认值（验证日志）

是一个JSX构造，用于在该位置创建组件。它本身不会在命令式代码路径中执行任何操作，就像您的

onSubmit

处理程序一样

你要寻找的是一个命令函数，你可以在React树外调用。比如从React路由器的

useHistory

hook中调用

从“react router dom”导入{useHistory}；
...
const history=useHistory（）；
...
onSubmit={（）=>history.push（“/home”）}

更具体地说，对于您的示例：

const ValidationLog = () => {
  const history = useHistory();
  return (
    
    <Formik 
    
     initialValues = {{email: "", password: ""}}
     onSubmit = {(values,{ setSubmitting}) => {
         setTimeout(() => {
            history.push(...)
            
         }, 500);
     }}
...

const ValidationLog=（）=>{
const history=useHistory（）；
返回(
{
设置超时（（）=>{
历史。推送（…）
}, 500);
}}
...

此处的组件方法：

在组件中使用状态变量

const [submitted, setSubmitted] = useState(false);

提交时，如果满足重定向条件，则将此状态变量设置为

true

setSubmitted(true);

在组件JSX中，根据状态变量有条件地放置

return <Fragment>
{ submitted 
? <Redirect to="/users" />
: <MyComponent ...> }
</Fragment>

返回
{提交
? 
:  }

注意

---

如果出于任何原因希望避免使用此三元运算符语法，可以在返回之前使用组件逻辑中的变量来解决此问题。根据组件的复杂性，可能会更简洁。

可以通过为全局窗口指定新值来重定向。位置值。

location='/users/'

。您可以这样做t在您的登录回调函数中。这将告诉浏览器重新加载页面。谢谢您的答复。但我不确定您的意思。您的意思是使用useHistory（）在另一个文件中创建另一个函数？我如何链接这两个文件？不需要新文件，只需更改

ValidationLog

组件。我将在应答中反映可能的更改最初标记在我的返回中。我应该将部件移动到哪里？抱歉，我对react.js很陌生。无意冒犯，但您可能应该阅读JavaScript，然后做出反应。因为这些概念与您的原始问题无关。至于回答您的直接问题：

ValidationLog

是一个隐式返回的箭头函数（因为它没有主体）。我将其更改为显式返回，因为我们需要挂钩。这就是为什么您有“两个返回”。您提到的另一个返回在另一个箭头函数中（Formik的渲染函数）。你的评论确实帮助我理解了一些我没有学好的概念。我没有注意到箭头函数和{}之间有区别。再次感谢您的好意！愉快的编码！感谢您的回复，但似乎会出现一个错误，说明道具未定义。哎呀，我忘了将道具作为组件的参数，我已经做了更改（const ValidationLog=（props）=>）必需的，它现在应该可以工作了。天哪，它可以工作了非常感谢你，但是你能简单地解释一下它是如何工作的吗？我的意思是为什么不工作？什么时候使用withRouter？只在一个块内工作。当你用withRouter封装你的组件时，你会在道具中得到历史对象，你可以用它来导航我看！你是说当用withRouter封装你的组件时使用withRouter下载组件，道具将成为app.js的历史路径，对吗？非常感谢！

setSubmitted(true);

return <Fragment>
{ submitted 
? <Redirect to="/users" />
: <MyComponent ...> }
</Fragment>