React Router conditional redirect - redirect

Question

I'm building a search UI using React, React Router and the awesome Reactivesearch library. 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.
Ideally, if users tried to navigate to mydomain.com/search, I will use RR Redirect component to redirect to the home page.
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?
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.
Here is an example in my 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
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 ??

Answer 1

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.
react-router-dom#6
Using a Wrapper
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>
)}
/>
Using a custom HOC
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 />} />
Using a layout route
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>
Demo
react-router-dom#5
The useSearchParams hook doesn't exist in v5 so you can create your own.
import { useMemo } from 'react';
import { useLocation } from 'react-router-dom';
const useSearchParams = () => {
const { search } = useLocation();
const searchParams = useMemo(() => new URLSearchParams(search), [search]);
return [searchParams];
};
Using a Wrapper
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>
)}
/>
Using a custom HOC
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} />
Demo