React/Typescript -使用哪种类型的路由器道具，以及如何从中获取查询值

Question

我有一个路由，看起来像这样:

<AppRoute
path="/auth/token"
exact
layout={AuthLayout}
component={Auth}
titleKey="root"
/>

AppRoute是这样的:

<Route
{...rest}
render={(props) => <Component props=props/>
/>

我看到那里的道具类型是RouteComponentProps，所以我在Auth组件中使用相同的:

const Auth = (props: RouteComponentProps) => { }

我想知道如何从查询参数中获得值，如果它们存在，因为有时我可能会将redirect_to查询参数添加到这样的路径:

/auth/token?redirect_to=https%3A%2F%2Ftechnology.com%2Fagent%2Fdashboard

我怎样才能从道具中得到那个值呢?我只看到我可以用props.location.search得到它，但这给了我问号后的整个字符串和所有参数。我必须自己从我需要的参数中解析值。我怎样才能得到这个值而不必自己解析它?

Answer 1

要获得查询参数，您必须使用以下语法:

const { search } = useLocation();
useEffect(() => {
const params = new URLSearchParams(search);
const queryValue = params.get('nameOfYourQueryParam');
}, [search])

使用基于类的组件，语法是相同的，在componentDidUpdate和/或componentDidMount中使用URLSearchParams，这取决于你需要什么。