Javascript 如果有条件，则在登录后响应路由

我对react中的路由有疑问。问题是我试图在代码中登录后重定向到一个路由

我读到了关于react router dom的文章，并尝试使用它，但什么都不做。在读了stack abot history.push之后，它就不起作用了，也许问题是我需要创建一个component.js来调用和重定向他，但我觉得有点迷失了方向。对这些问题感到抱歉

这是我创建登录名的地方：

import React, { Component } from 'react';
import './App.css';
import { Card, Button,CardBody,Container, Row, Col, Form, InputGroup,
  InputGroupAddon, InputGroupText, Input, FormGroup } from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faUser,faKey } from '@fortawesome/free-solid-svg-icons';
import axios from 'axios';
import { BrowserRouter as Router, Route, Link,Redirect } from "react-router-dom";
import PanelUsuario from './PanelUsuario';

class App extends Component {


  constructor (props) {
    super(props)

    this.state = {errors: []}
  }



  setErrors = (...errors) => {
    this.setState({errors})
  }

    handleSubmit = (e) => {

      e.preventDefault();

      const user = {
        usuario:  this.usuario.value,
        contraseña: this.password.value
      }


      axios.post(`http://api`,  user )
      .then(res => {
        this.setState({
          data: res.data,
          loading: true        
        });

        if (Object.keys(res.data).length > 0) {

          return <Redirect to ="PanelUsuario"/>

          } else {

          this.setErrors('Wrong user or Password')
        }
      })

    }

  render() {

    return (


        <Container>  
          <Form onSubmit={this.handleSubmit}>
            <Row> 
              <Col  md="4"></Col>
              <Col  md="4">
                <Card>

                  <CardBody>

                    <FormGroup>
                     <InputGroup>
                      <InputGroupAddon addonType="append">   
                        <InputGroupText> 
                          <FontAwesomeIcon icon={ faUser }/> 
                        </InputGroupText>  
                      </InputGroupAddon>
                      <Input placeholder="Usuario" type="text" innerRef={(element) => { this.usuario = element }} />                      
                       </InputGroup>
                    </FormGroup>


                    <FormGroup>
                      <InputGroup>
                        <InputGroupAddon addonType="append">   
                          <InputGroupText> 
                            <FontAwesomeIcon icon={ faKey }/> 
                          </InputGroupText>  
                        </InputGroupAddon>
                        <Input placeholder="Password"  type="password" innerRef={(element) => { this.password = element }}  />
                        </InputGroup>
                    </FormGroup>



                  <Row>
                    <Col  md="8"></Col>
                    <Col  md="4">
                      <Button color="success"  >Login</Button>
                    </Col>
                  </Row>
                  </CardBody>
                </Card>
              </Col>
              <Col md="4"></Col>
            </Row>
          </Form>

          <Row>
            <Col md="4"></Col>
            <Col md="4">
              <div className="text-center mensaje">
              {this.state.errors}
              </div>
            </Col>
            <Col md="4"></Col>
         </Row> 
        <Router>
        <Route path="PanelUsuario" component={PanelUsuario} />

        </Router>
        </Container>

    );
  }
}

export default App;

import React，{Component}来自'React'；
导入“/App.css”；
导入{卡片、按钮、卡片体、容器、行、列、窗体、InputGroup、，
来自“reactstrap”的InputGroupAddon、InputGroupText、Input、FormGroup}；
从'@fortawesome/react fontawesome'导入{FontAwesomeIcon}；
从“@fortwome/free solid svg icons”导入{faUser，faKey}”；
从“axios”导入axios；
从“react Router dom”导入{BrowserRouter as Router，Route，Link，Redirect}；
从“/PanelUsuario”导入PanelUsuario；
类应用程序扩展组件{
建造师（道具）{
超级（道具）
this.state={errors:[]}
}
setErrors=（…错误）=>{
this.setState（{errors}）
}
handleSubmit=（e）=>{
e、 预防默认值（）；
常量用户={
usuario:this.usuario.value，
contraseña:this.password.value
}
轴心柱(`http://api`，用户）
。然后（res=>{
这是我的国家({
数据：res.data，
加载：正确
});
if（Object.keys（res.data）.length>0）{
返回
}否则{
此.setErrors（'错误的用户或密码'）
}
})
}
render（）{
返回(
{this.usuario=element}}/>
{this.password=element}}/>
登录
{this.state.errors}
);
}
}
导出默认应用程序；

这是我的第二个观点（这是一个关于路由的例子，从这里可以看出它工作得很好）

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import App from './App';

function Index() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

function PanelUsuario() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about/">About</Link>
            </li>
            <li>
              <Link to="/users/">Users</Link>
            </li>
            <li>
              <Link to="/App/">App</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Index} />
        <Route path="/about/" component={About} />
        <Route path="/users/" component={Users} />
        <Route path="/App/" component={App}  />
      </div>
    </Router>
  );
}
export default PanelUsuario;

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Route，Link}；
从“./App”导入应用程序；
函数索引（）{
回家；
}
函数About（）{
返回大约；
}
函数用户（）{
返回用户；
}
功能面板Usuario（）{
返回(


家


关于


使用者


应用程序


);
}
导出默认的PanelUsuario；

您是否尝试过使用

反应路由器dom

中的

{withRouter}

您可以访问匹配、位置和历史道具，这些道具允许您将新条目推送到历史堆栈上，或替换历史堆栈上的当前条目

---

您是否尝试过使用

React router dom

中的

{withRouter}

您可以访问匹配、位置和历史道具，这些道具允许您将新条目推送到历史堆栈上，或替换历史堆栈上的当前条目

---

有了这个，我必须在另一个js文件中创建组件，并在第一个js文件中导入他，对吗？嗯，我不知道你的意思。我举的例子是在app.js文件中导入，但你可以从任何其他组件导入和使用它。不是真的，我一直在做这个！只想将登录视图移动到另一个。你能给我一些建议吗？谢谢你代码中的帮助，你已经重定向到as

，但这不是一个有效的路由。你能试着将其更改为

到该路由并让我知道是否有效吗？另外，在你的路由上

，我必须在另一个js文件中创建组件，并在第一个文件中导入它，对吗？嗯，我不确定你做了什么你的意思是。我举的例子是在app.js文件中导入，但你可以从任何其他组件中导入和使用它。不是真的，我无法接受！只是想将登录视图移动到另一个。你能给我一些建议吗？谢谢你代码中的帮助，你已经重定向到as

，但这不是一个有效的路由。你能尝试更改吗请向该路线发送帽子，并告诉我是否有效？同时，在您的路线上发送帽子

import { withRouter } from 'react-router-dom';

class App extends Component {
  // Gained access to {match, history, location} from props;
  ...
}

export default withRouter(App)