[英]React Routing after login in if conditional
I have Doubts about routing in react. 我对路由反应有疑问。 The problem is i try to redirect to one route after the login in my code. 问题是我尝试在代码中登录后尝试重定向到一条路由。
I read about react-router-dom and try to do it with but dont do anything. 我读了有关react-router-dom的文章,并尝试做到这一点,但什么也没做。 After that read in stack abot history.push but it doesn't work, maybe the problem is i need to create one component .js to call and redirect him but i feel a little lost in this. 在读入栈中的abot history.push之后,但它不起作用,也许问题是我需要创建一个组件.js来调用和重定向他,但是我对此有些失落。 Sorry for the issues. 对不起,问题。
This is where i created the login: 这是我创建登录名的地方:
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;
And this is my second view (is an example about routing, from here its working fine. 这是我的第二个观点(是有关路由的示例,从这里可以正常工作。
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;
Have you tried using { withRouter }
from React-router-dom
? 您是否尝试过在React-router-dom
使用{ withRouter }
?
You can have access to match, location, and history props that lets you push a new entry onto the history stack or replace the current entry on the history stack 您可以访问匹配,位置和历史记录道具,从而可以将新条目推入历史记录堆栈或替换历史记录堆栈上的当前条目
https://reacttraining.com/react-router/web/api/withRouter https://reacttraining.com/react-router/web/api/withRouter
https://reacttraining.com/react-router/web/api/history https://reacttraining.com/react-router/web/api/history
import { withRouter } from 'react-router-dom';
class App extends Component {
// Gained access to {match, history, location} from props;
...
}
export default withRouter(App)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.