[英]React Router conditional redirect
I'm building a search UI using React, React Router and the awesome Reactivesearch library.我正在使用 React、React Router 和很棒的Reactivesearch库构建搜索 UI。 I'm trying to figure out how I can prevent users from simply navigating to mydomain.com/search , since that is my search results route.
我试图弄清楚如何阻止用户简单地导航到mydomain.com/search ,因为那是我的搜索结果路线。
Ideally, if users tried to navigate to mydomain.com/search, I will use RR Redirect component to redirect to the home page.理想情况下,如果用户尝试导航到 mydomain.com/search,我将使用 RR Redirect 组件重定向到主页。
I'm using "/search"
for the route that the Route component in RR(v5) to render the search results page and can't quite figure out how to use something like /search?q=${value}
to render the page?我正在为 RR(v5) 中的 Route 组件呈现搜索结果页面的路线使用
"/search"
,并且无法完全弄清楚如何使用/search?q=${value}
之类的东西来呈现页?
As a preface I do have this in the render block (I'm using class based component for search results)作为前言,我在渲染块中有这个(我使用基于类的组件来搜索结果)
let value = JSON.stringify(queryString.parse(location.search));
if (this.value === '' || null) {
return (
<Redirect to="/" />
);
}
However, its not working... I can still go to my address bar and type in mydomain.com/search and the page renders.但是,它不起作用...我仍然可以转到地址栏并输入 mydomain.com/search 并呈现页面。
Here is an example in my SearchResults.tsx:这是我的 SearchResults.tsx 中的一个示例:
<Route path = "/search" render={() => (
<ReactiveList
...
...
/>
/>
I'm trying to get to我试图到达
<Route path = `/search?q="${value}"` render={() => (
<ReactiveList
...
...
/>
/>
Update Docs on ReactiveList Example from docs:从文档更新有关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'],
}}
/>
How can I prevent users from simply navigating to mydomain.com/search ??如何防止用户简单地导航到 mydomain.com/search ?
If you want to conditionally render the ReactiveList
component based on if there's a truthy q
queryString parameter then you can use either a wrapper component, a layout route, or a Higher Order Component (HOC) to read the queryString and handle the redirection logic.如果您想根据是否有真值
q
queryString 参数有条件地呈现ReactiveList
组件,那么您可以使用包装器组件、布局路由或高阶组件 (HOC) 来读取 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
The useSearchParams
hook doesn't exist in v5 so you can create your own. v5 中不存在
useSearchParams
挂钩,因此您可以创建自己的挂钩。
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} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.