[英]React router redirect after form submit
当我在表单输入上按 Enter 键时,谁能告诉我如何使用功能组件中的反应路由器重定向到某个路径,我还想将输入的任何内容作为道具传递给组件
也没有提交按钮只是输入字段
我的代码真的很糟糕,我想我不知道我在做什么,但它是:
应用程序.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Index from '../containers/Index';
import User from '../containers/User';
const App = () => {
return (
<Router>
<Switch>
<Route path='/' exact component={Index} />
<Route path='/:user' component={User} />
</Switch>
</Router>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
索引.js
import React, { useState, useEffect } from 'react';
import { withRouter } from 'react-router-dom';
const index = () => {
const [userState, setUserState] = useState(undefined);
useEffect(() => {
setUserState({ user: user });
console.log(userState);
}, []);
let user;
const handleUser = event => {
event.preventDefault();
user = event.target.value;
};
console.log(user);
return (
<div>
<h1>github stats</h1>
<form
onSubmit={e => {
e.preventDefault();
user = e.target.value;
console.log(user);
}}
>
<input type='text'></input>
</form>
</div>
);
};
export default index;
用户.js
import React, { useState, useEffect } from 'react';
const axios = require('axios');
const user = props => {
// console.log(props.username);
const [userState, setUserState] = useState({ user: undefined });
const token = 'personal access token';
const query = `
{
user(login: "${props.username}"){
name
login
avatarUrl
repositories(first: 10 orderBy:{
field: STARGAZERS
direction: DESC
}){
edges{
node{
name
}
}
}
}
}`;
useEffect(() => {
fetchUser();
}, []);
const fetchUser = async () => {
let response = await axios.post(
'https://api.github.com/graphql',
{ query: query },
{ headers: { Authorization: `Bearer ${token}` } }
);
let { data } = response.data;
console.log(data);
};
return <div>hello</div>;
};
export default user;
首先,我认为您的第二条路线应该如下所示,以便将user
作为路线参数
<Route path='/user/:user' component={User} />
然后在您的Index.js表单 onSubmit 中执行以下操作:
location.replace(`/user/${user}`);
最后在User.js里面做:
user(login: "${props.match.params.user}") {...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.