如何在我的路由中定义路由。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路由器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
路由道具被传递给渲染函数。
其他回答
最简单的解决方案!
在路由方面:
<Route path="/app/someUrl/:id" exact component={binder} />
在react代码中:
componentDidMount() {
var id = window.location.href.split('/')[window.location.href.split('/').length - 1];
var queryString = "http://url/api/controller/" + id
$.getJSON(queryString)
.then(res => {
this.setState({ data: res });
});
}
假设有一个url如下所示
http://localhost:3000/callback?code=6c3c9b39-de2f-3bf4-a542-3e77a64d3341
如果我们想从该URL提取代码，下面的方法将工作。
const authResult = new URLSearchParams(window.location.search);
const code = authResult.get('code')
React路由器5.1+
5.1引入了各种钩子，如useLocation和useParams，可以在这里使用。
例子:
<Route path="/test/:slug" component={Dashboard} />
如果我们去参观
http://localhost:3000/test/signin?_k=v9ifuf&__firebase_request_key=blablabla
你可以把它找回来
import { useLocation } from 'react-router';
import queryString from 'query-string';
const Dashboard: React.FC = React.memo((props) => {
const location = useLocation();
console.log(queryString.parse(location.search));
// {__firebase_request_key: "blablabla", _k: "v9ifuf"}
...
return <p>Example</p>;
}
this.props.params。Your_param_name将工作。
这是从查询字符串中获取参数的方法。 请执行console.log(this.props);探索所有的可能性。
也许有点晚了，但是这个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>
)
}
