反应路由器条件重定向
提问于 2022-07-07 10:26:13
我正在构建一个使用React、React路由器和可怕的复搜索库的搜索UI。我试图弄清楚如何防止用户简单地导航到mydomain.com/search，，因为这是我的搜索结果路径。
理想情况下，如果用户试图导航到mydomain.com/search，我将使用RR重定向组件重定向到主页。
我使用"/search"作为RR中的路由组件(V5)来呈现搜索结果页面，但无法完全弄清楚如何使用/search?q=${value}之类的东西来呈现页面？
作为序言，我在呈现块中有这一点(我使用基于类的组件来搜索结果)
let value = JSON.stringify(queryString.parse(location.search));
if (this.value === '' || null) {
return (
<Redirect to="/" />
);
}但是，它不起作用..。我仍然可以进入我的地址栏，在mydomain.com/search中键入并呈现页面。
下面是我的SearchResults.tsx中的一个例子：
<Route path = "/search" render={() => (
<ReactiveList
...
...
/>
/>我试着去
<Route path = `/search?q="${value}"` render={() => (
<ReactiveList
...
...
/>
/>从文档中更新ReactiveList示例上的ReactiveList文档：
<ReactiveList
componentId="SearchResult"
dataField="ratings"
pagination={false}
paginationAt="bottom"
pages={5}
sortBy="desc"
size={10}
loader="Loading Results.."
showResultStats={true}
renderItem={res => <div>{res.title}</div>}
renderResultStats={function(stats) {
return `Showing ${stats.displayedResults} of total ${stats.numberOfResults} in ${
stats.time
} ms`;
}}
react={{
and: ['CitySensor', 'SearchSensor'],
}}
/>如何防止用户简单地导航到mydomain.com/search？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-07-09 15:04:13
如果希望根据是否存在真实的ReactiveList queryString参数有条件地呈现queryString组件，则可以使用包装器组件、布局路由或高阶组件(自组织)来读取queryString并处理重定向逻辑。
react-router-dom@6
使用包装器
import { Navigate, useSearchParams } from 'react-router-dom';
const QuaryParametersWrapper = ({ children, parameters = [] }) => {
const [searchParams] = useSearchParams();
const hasParameter = parameters.some(
(parameter) => !!searchParams.get(parameter)
);
return hasParameter ? children : <Navigate to="/" replace />;
};..。
<Route
path="/search"
element={(
<ReactiveListWrapper parameters={["q"]}>
<ReactiveList
...
...
/>
</ReactiveListWrapper>
)}
/>使用自定义自定义
import { Navigate, useSearchParams } from 'react-router-dom';
const withQueryParameters = (...parameters) => (Component) => (props) => {
const [searchParams] = useSearchParams();
const hasParameter = parameters.some(
(parameter) => !!searchParams.get(parameter)
);
return hasParameter ? <Component {...props} /> : <Navigate to="/" replace />;
};..。
export default withQueryParameters("q")(ReactiveList);..。
import ReactiveListWrapper from '../path/to/ReactiveList';
...
<Route path="/search" element={<ReactiveListWrapper />} />使用布局路由
import { Navigate, Outlet, useSearchParams } from 'react-router-dom';
const QuaryParametersLayout = ({ parameters = [] }) => {
const [searchParams] = useSearchParams();
const hasParameter = parameters.some(
(parameter) => !!searchParams.get(parameter)
);
return hasParameter ? <Outlet /> : <Navigate to="/" replace />;
};..。
<Route element={<QuaryParametersLayout parameters={["q"]} />}>
<Route path="/search" element={<ReactiveList />} />
</Route>演示
react-router-dom@5
useSearchParams钩子在v5中不存在，因此您可以创建自己的钩子。
import { useMemo } from 'react';
import { useLocation } from 'react-router-dom';
const useSearchParams = () => {
const { search } = useLocation();
const searchParams = useMemo(() => new URLSearchParams(search), [search]);
return [searchParams];
};使用包装器
import useSearchParams from '../path/to/useSearchParams';
const QuaryParametersWrapper = ({ children, parameters = [] }) => {
const [searchParams] = useSearchParams();
const hasParameter = parameters.some(
(parameter) => !!searchParams.get(parameter)
);
return hasParameter ? children : <Redirect to="/" />;
};..。
<Route
path="/search1"
render={(routeProps) => (
<QuaryParametersWrapper parameters={["q"]}>
<ReactiveList {...routeProps} />
</QuaryParametersWrapper>
)}
/>使用自定义自定义
import { Redirect } from 'react-router-dom';
import useSearchParams from '../path/to/useSearchParams';
const withQueryParameters = (...parameters) => (Component) => (props) => {
const [searchParams] = useSearchParams();
const hasParameter = parameters.some(
(parameter) => !!searchParams.get(parameter)
);
return hasParameter ? <Component {...props} /> : <Redirect to="/" />;
};..。
export default withQueryParameters("q")(ReactiveList);..。
import ReactiveListWrapper from '../path/to/ReactiveList';
...
<Route path="/search2" component={QueryReactiveList} />演示
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72902607
复制
腾讯云开发者
