[英]React Router v6 redirect when there are not any url queryString parameters
I need the router redirects to the page "/"
when the URL doesn't have any queryString parameters ( "/domain/search"
).当 URL 没有任何 queryString 参数( "/domain/search"
)时,我需要路由器重定向到页面"/"
。 But if it has any, for example "/domain/search?keyword=something&page=1"
, it should go on and render the component Movies
.但如果它有任何内容,例如"/domain/search?keyword=something&page=1"
,它应该继续渲染组件Movies
。
My code below doesn't work, it still redirects to "/"
even if the URL has some queryString parameters.我下面的代码不起作用,即使 URL 有一些 queryString 参数,它仍然会重定向到"/"
。
Please help with this problem.请帮助解决这个问题。
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Search />} />
<Route path="search" element={<Navigate to="/" />} />
<Route path="search/*" element={<Movies />} />
</Route>
</Routes>
You have to use useSearchParams
in the Movies
component to read the query string in the URL:您必须在Movies
组件中使用useSearchParams
来读取 URL 中的查询字符串:
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Search />} />
<Route path="search" element={<Movies />} />
</Route>
</Routes>
Movies
component: Movies
组件:import { Navigate, useSearchParams } from "react-router-dom";
function Movies(props) {
const [searchParams, setSearchParams] = useSearchParams();
const page = searchParams.get("page");
const otherParam = searchParams.get("otherParam");
if(!page && !otherParam) {
return <Navigate to="/" replace />
}
// the rest of your component
...
}
Or using URLSearchParams.keys()
或使用URLSearchParams.keys()
import { Navigate, useSearchParams } from "react-router-dom";
function Movies() {
const [searchParams, setSearchParams] = useSearchParams();
if (![...searchParams.keys()].length) {
return <Navigate to="/" replace />;
}
return <span>Movies page</span>;
}
react-router-dom
and the Route
component doesn't use or reference the URL queryString when matching routes. react-router-dom
和Route
组件在匹配路由时不使用或引用 URL queryString。 This is something the routed component should check or something you can create a special layout route component to handle.这是路由组件应该检查的东西,或者您可以创建一个特殊的布局路由组件来处理。 The code should use the useSearchParams
hook to access the searchParams
and check for the existence of any params.代码应使用useSearchParams
挂钩来访问searchParams
并检查是否存在任何参数。
Example:例子:
This example is a layout route that checks the search params entries array length and if there are entries an Outlet
component is rendered for any nested Route
components to render their element
prop out on, otherwise a redirect back to "/"
is rendered.此示例是一个布局路由,它检查搜索参数条目数组长度,如果有条目,则为任何嵌套的Route
组件呈现一个Outlet
组件以呈现其element
支撑,否则将呈现重定向回"/"
。
import { Navigate, Outlet, useSearchParams } from 'react-router-dom';
const ParamsRoute = () => {
const [searchParams] = useSearchParams();
return searchParams.entries().length
? <Outlet />
: <Navigate to="/" replace />
};
Usage:用法:
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Search />} />
<Route element={<ParamsRoute />}>
<Route path="search" element={<Movies />} />
</Route>
</Route>
</Routes>
Perhaps you want specific queryString parameters to be present:也许您希望出现特定的 queryString 参数:
import { Navigate, Outlet, useSearchParams } from 'react-router-dom';
const ParamsRoute = ({ params = [] }) => {
const [searchParams] = useSearchParams();
return searchParams.entries().length // has params
&& params.every(param => searchParams.get(param)) // has required params
? <Outlet />
: <Navigate to="/" replace />
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.