如何在我的路由中定义路由。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>
当前回答
也许有点晚了，但是这个react钩子可以帮助你在URL查询中获取/设置值:https://github.com/rudyhuynh/use-url-search-params(由我编写)。
不管有没有反应路由器，它都可以工作。 下面是您案例中的代码示例:
import React from "react";
import { useUrlSearchParams } from "use-url-search-params";
const MyComponent = () => {
const [params, setParams] = useUrlSearchParams()
return (
<div>
__firebase_request_key: {params.__firebase_request_key}
</div>
)
}
其他回答
export class ClassName extends Component{
constructor(props){
super(props);
this.state = {
id:parseInt(props.match.params.id,10)
}
}
render(){
return(
//Code
{this.state.id}
);
}
你也可以使用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上的文档中阅读更多
最受欢迎的答案中的链接是死的，因为SO不让我评论，对于ReactRouter v6.3.0，你可以使用params钩子
import * as React from 'react';
import { Routes, Route, useParams } from 'react-router-dom';
function ProfilePage() {
// Get the userId param from the URL.
let { userId } = useParams();
// ...
}
function App() {
return (
<Routes>
<Route path="users">
<Route path=":userId" element={<ProfilePage />} />
<Route path="me" element={...} />
</Route>
</Routes>
);
}
在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"}
React路由器v4
使用组件
<Route path="/users/:id" component={UserPage}/>
this.props.match.params.id
该组件自动使用路由道具呈现。
使用渲染
<Route path="/users/:id" render={(props) => <UserPage {...props} />}/>
this.props.match.params.id
路由道具被传递给渲染函数。
