Remove/replenish tailing characters from react-router-dom Routes

user_9646657 0
Viewed 22

I have a Route: /:question/:id

What I want is if put /:questionName/:idnonsense, the nonsense gets removed automatically.

Say /how_to_do_that/123 is an available route, if /how_to_do_that/123345345345 or /how_to_do_that/123awheofhawoeiha entered in the address bar, it will revise automatically to /how_to_do_that/123. Or if I put /how_to_do_that/12, it will replenish it to /how_to_do_that/123. And redirect to /how_to_do_that/123

How am I able to do that? I am using Routes in React. I tried a whole day to make it....

I tried on youtube, their routes can do that. So https://www.youtube.com/watch?v=1fPWr0d5zBE is an available link, if you try to visit https://www.youtube.com/watch?v=1fPWr0d5zBEAHSOHOWIHFOH, it will be revised to https://www.youtube.com/watch?v=1fPWr0d5zBE and visit that link instead. But if you try to visit https://www.youtube.com/watch?v=1fPWr0d5z, that is a 404 (which I think can be improved by matching the close guess).

Does anybody know how to do that? Thanks a lot.

react-router-dom react-router reactjs javascript
1 Answers

Well, your youtube example doesn't match what you are asking for in your question (route path params vs queryString params), but I think the answer is the same either way. You want to validate a route path parameter. Handle this in the component with a regular expression.

const regexp123 = /^123$/;

console.log(regexp123.test("123345345345"));
console.log(regexp123.test("123"));
console.log(regexp123.test("12"));

In the component the logic might look like this:

import { generatePath, useParams, useNaviate } from 'react-router-dom';

const regexp123 = /^123$/;
const params = useParams();
const navigate = useNavigate();

useEffect(() => {
  const { id } = params;
  if (!regexp123.test(id)) {
    const target = generatePath(
      "/:question/:id",
      {
        ...params,
        id: '123',
      },
    );
    navigate(target, { replace: true });
  }
}, [navigate, params]);

The gist is that the component needs to validate the path parameters manually and handle accordingly. The same for queryString parameters using the useSearchParams hook.

user_86908570
Related