如何在我的路由中定义路由。jsx文件捕获__firebase_request_key参数值从一个URL生成的Twitter的单点登录过程后，从他们的服务器重定向?
http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla
我尝试了以下路由配置，但:redirectParam没有捕获提到的参数:
<Router>
<Route path="/" component={Main}>
<Route path="signin" component={SignIn}>
<Route path=":redirectParam" component={TwitterSsoButton} />
</Route>
</Route>
</Router>
当前回答
export class ClassName extends Component{
constructor(props){
super(props);
this.state = {
id:parseInt(props.match.params.id,10)
}
}
render(){
return(
//Code
{this.state.id}
);
}
其他回答
export class ClassName extends Component{
constructor(props){
super(props);
this.state = {
id:parseInt(props.match.params.id,10)
}
}
render(){
return(
//Code
{this.state.id}
);
}
也许有人可以帮助解释为什么，但如果你试图从App.js页面上的新安装的Create React App中点击props来查找位置，你会得到:
无法读取未定义的属性“搜索”
即使我有App.js作为主路径:
<Route exact path='/' render={props => (
只在App.js上，使用window。地点对我来说很合适:
import queryString from 'query-string';
...
const queryStringParams = queryString.parse(window.location.search);
componentDidMount(){
//http://localhost:3000/service/anas
//<Route path="/service/:serviceName" component={Service} />
const {params} =this.props.match;
this.setState({
title: params.serviceName ,
content: data.Content
})
}
你也可以使用react-location-query包，例如:
const [name, setName] = useLocationField("name", {
type: "string",
initial: "Rostyslav"
});
return (
<div className="App">
<h1>Hello {name}</h1>
<div>
<label>Change name: </label>
<input value={name} onChange={e => setName(e.target.value)} />
</div>
</div>
);
名称-获取价值 setName =设置值
这个包有很多选项，在Github上的文档中阅读更多
在React-Router-Dom V5中
function useQeury() {
const [query, setQeury] = useState({});
const search = useLocation().search.slice(1);
useEffect(() => {
setQeury(() => {
const query = new URLSearchParams(search);
const result = {};
for (let [key, value] of query.entries()) {
result[key] = value;
}
setQeury(result);
}, [search]);
}, [search, setQeury]);
return { ...query };
}
// you can destruct query search like:
const {page , search} = useQuery()
// result
// {page : 1 , Search: "ABC"}
