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

当前回答

在没有第三方库或复杂的解决方案的情况下,在一行中完成这一切。以下是如何

let myVariable = new URLSearchParams(history.location.search).get('business');

你唯一需要改变的是你自己的参数名称的单词“business”。

业务= url.com例子吗?你好

myVariable的结果将是hello

其他回答

this.props.params。Your_param_name将工作。

这是从查询字符串中获取参数的方法。 请执行console.log(this.props);探索所有的可能性。

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钩子时,没有访问this.props.location的权限。 要获取url参数,请使用窗口对象。

const search = window.location.search;
const params = new URLSearchParams(search);
const foo = params.get('bar');

如果你的路由器是这样的

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

你会得到这样的id

this.props.match.params.id

React路由器v6,使用钩子

在react-router-dom v6中,有一个名为useSearchParams的新钩子。所以,

const [searchParams, setSearchParams] = useSearchParams();
searchParams.get("__firebase_request_key")

你会得到“blablabla”。注意,searchParams是URLSearchParams的一个实例,它也实现了一个迭代器,例如用于使用Object.fromEntries等。

React Router v4/v5,没有钩子,通用

React Router v4不再为你解析查询,但你只能通过this.props.location.search(或useLocation,见下文)访问它。原因见nbeuchat的答案。

例如,你可以用qs库导入qs

qs.parse(this.props.location.search, { ignoreQueryPrefix: true }).__firebase_request_key

另一个库是query-string。有关解析搜索字符串的更多想法,请参阅这个答案。如果你不需要ie兼容性,你也可以使用

new URLSearchParams(this.props.location.search).get("__firebase_request_key")

对于功能组件,你可以用钩子useLocation替换this.props.location。注意,你可以使用window.location。搜索,但这将不允许在更改时触发React渲染。 如果你的(非功能性的)组件不是Switch的直接子组件,你需要使用throuter来访问路由器提供的任何道具。

React路由器v3

React Router已经为你解析了位置,并将它作为道具传递给你的RouteComponent。您可以访问查询(在?在url)部分通过

this.props.location.query.__firebase_request_key

如果你在路由器中寻找用冒号(:)分隔的路径参数值,这些可以通过

this.props.match.params.redirectParam

这适用于最新的React Router v3版本(不确定是哪个)。旧版本的路由器报告使用this.props.params.redirectParam。

一般

尼扎姆。Sp的建议

console.log(this.props)

无论如何都会有帮助的。