Question

我有一个react应用，还有一个应该加载一组url值的组件

        <PersistGate persistor={rootStore.persistor}>
            <Router history={history}>
                <ErrorBoundary>
                  <Preloader history={history} /> <== this need to read the url
                  <PasswordChecker></PasswordChecker>
                  <RouteDispatcher></RouteDispatcher> <== this contain the list of routes
                </ErrorBoundary>
            </Router>
        </PersistGate>

在我的RouteDispatcher路径中，我设置了这样的路线：

    <BrowserRouter>
      <Switch>
        <PrivateRoute path="/ws/:ws/pj/:pj/ds/:ds" component={HomeDatastore} />
        <PrivateRoute path="/ws/:ws/pj/:pj" component={HomeProject} />
        <PrivateRoute path="/ws/:ws" component={HomeWorkspace} />
      </Switch>
    </BrowserRouter>

如何获取ws=:ws pj=:pj等的值...

我当时正在考虑使用正则表达式，但是我想知道是否有更好的方法。 Preloader在routeDispatcher之外，因此我似乎找不到一种获取值的好方法。

Answer 1

反应路由器向组件提供params。选中props.match.params。我看到您有一个自定义组件PrivateRoute，因此请先在PrivateRoute中检查道具。

Answer 2

可以尝试使用 useParams（）挂钩。它为您提供了一种访问URL参数的方法

参考：https://blog.logrocket.com/react-router-hooks-will-make-your-component-cleaner/

沙盒：https://codesandbox.io/s/react-router-useparams-hooks-q8g37

这可能会帮助您入门

import { useParams } from "react-router-dom";

function ComponentName() {
  let params = useParams();
  return (
    <div>
     {params.ws}
     {params.pj}
    </div>
  );
}

从URL中获取路由器值

2 个答案: