如何在我的路由中定义路由。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

const urlParams = new URLSearchParams(this.props.location.search)
const key = urlParams.get('__firebase_request_key')

请注意,它目前还处于试验阶段。

查看浏览器兼容性:https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/URLSearchParams#Browser_compatibility

其他回答

有了这一行代码,你可以在React Hook和React Class Component的任何地方使用它。

https://www.hunterisgod.com/?city=Leipzig

let city = (new URLSearchParams(window.location.search)).get("city")

你可以检查react-router,简单地说,你可以使用代码获取查询参数,只要你在路由器中定义:

this.props.params.userId

容易解构分配URLSearchParams

测试尝试如下:

1 扫描:https://www.google.com/?param1=apple&param2=banana

2 右键单击>页,单击Inspect > goto Console选项卡 然后粘贴下面的代码:

const { param1, param2 } = Object.fromEntries(new URLSearchParams(location.search));
console.log("YES!!!", param1, param2 );

输出:

YES!!! apple banana

你可以扩展params,如param1, param2,想扩展多少就扩展多少。

React路由器v5.1引入了钩子:

For

<Route path="/posts/:id">
  <BlogPost />
</Route>

你可以通过hook访问params / id:

const { id } = useParams();

更多的在这里。

如果你的路由器是这样的

<Route exact path="/category/:id" component={ProductList}/>

你会得到这样的id

this.props.match.params.id