reactjs - 如何将值传递给路由中的另一个组件?
问题描述
我有一个登录页面,它通过令牌进行身份验证,不久之后,输入的用户和密码将返回用户数据。在此之后,我将用户重定向到一个名为 Dashboard 的组件。但我想将他的数据传递给那个组件。
索引.js
在这里我有我创建的路线
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import Sobre from './Sobre.js';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Dashboard from './ui/Dashboard';
import LoginForm from './ui/LoginForm';
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route path="/" exact={true} component={LoginForm} />
<Route path="/sobre" component={Sobre} />
<Route path="/dashboard" component={Dashboard} />
</Switch>
</BrowserRouter>
,document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.register();
登录页面
在 isUser 函数中,它被重定向到仪表板。如果它是用户或还不是用户,它就会丢失一个条件,但事实并非如此。
import React, { Component } from 'react';
export default class LoginForm extends Component{
constructor(){
super();
this.state = {
login: '',
senha: '',
authenticate_code: '',
url: 'http://192.168.0.19/api/'
};
this.handleLogin = this.handleLogin.bind(this);
this.isUser = this.isUser.bind(this);
}
handleLogin(e){
e.preventDefault();
let dataToGetToken= {
nome: "teste",
senha: "1234"
};
try{
fetch(this.state.url + 'token', {
method: 'POST',
body: JSON.stringify(dataToGetToken),
headers: {
"Content-type": "application/json; charset=UTF-8"
}
})
.then(response => response.json())
.then(json => {
this.setState({ authenticate_code: 'bearer ' + json.token })
this.isUser(this.refs.login.value, this.refs.pass.value, this.state.authenticate_code);
});
}
catch(e){
console.log(e);
}
}
isUser(name, pass, token){
var login = new Object();
login.nome = name;
login.senha = pass;
console.log(login);
console.log(token);
try{
fetch(this.state.url + 'usuarios/getuser', {
method: 'POST',
body: JSON.stringify(login),
headers: {
"Authorization": token,
"Content-type": "application/json; charset=UTF-8"
}
})
.then(response => response.json())
.then(json => {
//Redireciona
this.props.history.push('/ui/Dashboard')
});
}
catch(e){
console.log(e);
}
}
render(){
return(
<div className="App">
<div className="container">
<div className="row">
<div className="col-sm-12">
<form onSubmit={this.handleLogin}>
<div className="form-group">
<label htmlFor="exampleInputEmail1">Login</label>
<input type="text" ref="login" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"/>
<small id="emailHelp" className="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div className="form-group">
<label htmlFor="exampleInputPassword1">Senha</label>
<input type="password" ref="pass" className="form-control" id="exampleInputPassword1" placeholder="Password" />
</div>
<div className="form-group form-check">
<input type="checkbox" className="form-check-input" id="exampleCheck1" />
<label className="form-check-label" htmlFor="exampleCheck1">Check me out</label>
</div>
<button type="submit" className="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
);
}
}
** 我想重定向到这个组件,但我想获取登录返回的数据**
import React, { Component } from 'react';
export default class Dashboard extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div></div>
);
}
}
解决方案
我认为,对于您来说,为了在推动路线的同时传递一些道具,您只需这样做:
this.props.history.push('/ui/Dashboard', { prop : 'value' })
您可以在此处查看示例
推荐阅读
- kubernetes - Kubernetes:当创建一个新的 mutating webhook 时,如何将这个 Mutation 应用到集群中的现有资源?
- ruby-on-rails - Rails - has_many through、STI 和范围
- python-3.x - 是否可以不必为函数的每次迭代复制代码
- visual-studio - 地形的某些部分太暗
- node.js - react-beautiful-dnd 和 mysql 状态管理
- python - 带有状态工作者的 ThreadPoolExecutor
- javascript - TypeScript:将转发的参数键入到 Map
已知的构造函数 - python - 如何在python中定义最终的classvar变量
- google-sheets - 将相同的公式应用于每个单元格
- r - 如何使用 R 在特定目录中通过循环根据列表编写几个数据帧?