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

当前回答

据我所知,有三种方法可以做到。

1.使用正则表达式获取查询字符串。

2.您可以使用浏览器api。 图片当前的url是这样的:

http://www.google.com.au?token=123

我们只想得到123;

第一个

 const query = new URLSearchParams(this.props.location.search);

Then

const token = query.get('token')
console.log(token)//123

使用第三个名为“query-string”的库。 首先安装它 NPM I查询字符串 然后导入到当前的javascript文件中: 导入query-string

下一步是在当前url中获取'token',请执行以下操作:

const value=queryString.parse(this.props.location.search);
const token=value.token;
console.log('token',token)//123

2019年2月25日更新

4. 如果当前url如下所示:

http://www.google.com.au?app=home&act=article&aid=160990

我们定义一个函数来获取参数:

function getQueryVariable(variable)
{
        var query = window.location.search.substring(1);
        console.log(query)//"app=article&act=news_content&aid=160990"
        var vars = query.split("&");
        console.log(vars) //[ 'app=article', 'act=news_content', 'aid=160990' ]
        for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    console.log(pair)//[ 'app', 'article' ][ 'act', 'news_content' ][ 'aid', '160990' ] 
        if(pair[0] == variable){return pair[1];}
         }
         return(false);
}

我们可以通过以下方式获得“援助”:

getQueryVariable('aid') //160990

其他回答

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

this.props.params.userId

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

For

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

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

const { id } = useParams();

更多的在这里。

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

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

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

当使用React钩子时,没有访问this.props.location的权限。 要获取url参数,请使用窗口对象。

const search = window.location.search;
const params = new URLSearchParams(search);
const foo = params.get('bar');
export class ClassName extends Component{
      constructor(props){
        super(props);
        this.state = {
          id:parseInt(props.match.params.id,10)
        }
    }
     render(){
        return(
          //Code
          {this.state.id}
        );
}