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

当前回答

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
    })
}

其他回答

this.props.params。Your_param_name将工作。

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

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

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

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

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

myVariable的结果将是hello

let data = new FormData();
data.append('file', values.file);

你可以使用下面的react钩子:

如果url改变,钩子状态会更新 SSR: typeof window === "undefined",只是检查窗口导致错误(尝试一下) 代理对象隐藏实现,因此返回undefined而不是null

这是获取搜索参数为对象的函数:

const getSearchParams = <T extends object>(): Partial<T> => {
    // server side rendering
    if (typeof window === "undefined") {
        return {}
    }

    const params = new URLSearchParams(window.location.search) 

    return new Proxy(params, {
        get(target, prop, receiver) {
            return target.get(prop as string) || undefined
        },
    }) as T
}

然后像这样把它用作钩子:

const useSearchParams = <T extends object = any>(): Partial<T> => {
    const [searchParams, setSearchParams] = useState(getSearchParams())

    useEffect(() => {
        setSearchParams(getSearchParams())
    }, [typeof window === "undefined" ? "once" : window.location.search])

    return searchParams
}

如果你的url是这样的:

/app?page=2&count=10

你可以这样读:

const { page, count } = useQueryParams();

console.log(page, count)

你可以使用这个用Typescript写的简单钩子:

const useQueryParams = (query: string = null) => {      
    const result: Record<string, string> = {};
    new URLSearchParams(query||window.location.search).forEach((value, key) => {
      result[key] = value;
    });
    return result;
}

用法:

// http://localhost:3000/?userId=1889&num=112
const { userId, num } = useQueryParams();
// OR
const params = useQueryParams('userId=1889&num=112');