Adding Redirects programmatically to React Router

Question

I'm trying to add a bunch of redirects given an array of old routes and new routes so I came out with this component:

const redirectUrls = [
    { oldUrl: '/robin', newUrl: '/users' },
    { oldUrl: '/batman', newUrl: '/courses' }
];

export default Redirects = () => (
    redirectUrls.map((url, index) => <Route key={index} exact path={url.oldUrl} render={() => <Redirect to={url.newUrl} />} />)
);

Which works fine, but I wanted it to be simplier so I removed the Route and left only the redirect like this:

export default Redirects = () => (
    redirectUrls.map((url, index) => <Redirect key={index} exact from={url.oldUrl} to={url.newUrl} />))

But it won't work, all the redirects take me to the last route, which in this case is /courses, and its weird because if I do this:

<Switch>
    ...
    <Route path='/users' exact component={users} />
    <Route path="/courses" exact component={CoursesList} />
    <Redirect from='/robin' to='/users' />
    <Redirect from='/batman' to='/courses' /> // having them like this works fine
</Switch>

So it makes no sense for them fail when I create them with a map and I haven't found anything that leads to the cause nor to a solution.

can you show how your routes looks like in your react dev tool ? a screenshot may be — Panther
– Panther, Commented Apr 26, 2020 at 18:18

lawrence-witt · Accepted Answer · 2020-04-26 18:25:17Z

2

You need to wrap the exported redirects in a switch:

const Redirects = () => {
  return (
    <Switch>
      {redirectUrls.map(url => (
        <Redirect from={url.oldUrl} to={url.newUrl} />
      ))}
    </Switch>
  );
};

export default Redirects;

That's only if you actually need to make a component out of them. It's not totally clear what you need and are looking for since export default Redirects = () => is invalid syntax. If you just want to bundle them as some variable you can do:

export const Redirects = redirectUrls.map(url => <Redirect from={url.oldUrl} to {url.newUrl} />);

// App.js

<Switch>
    <Route path='/users' exact component={users} />
    <Route path="/courses" exact component={CoursesList} />
    ...
    {Redirects}
</Switch>

answered Apr 26, 2020 at 18:25

lawrence-witt

9,5023 gold badges18 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sebaslh12 Over a year ago

Why adding another Switch to the redirects makes the map work? If having them one by one with one switch works fine. Also this export default Redirects = () is valid, even though the Redirects is unnecessary.

lawrence-witt Over a year ago

To be honest I'm not totally sure. I've used this as a workaround in the past but after playing with it some more it doesn't always behave as I expected it to. For instance, putting in a similar component of mapped Routes (no Switch) above the mapped Redirects component makes the redirects stop working. Placing the Redirects component at the top of the parent switch also breaks the rest of the routes for me. I'm not sure I can recommend using this method anymore, at least not without some clarification - the github issues page might be a good place to ask.

chandawarlokesh · Accepted Answer · 2020-04-26 18:20:50Z

0

Did you try this with exact props

<Switch>
  ...
    <Route path='/users' exact component={users} />
    <Route path="/courses" exact component={CoursesList} />
    <Redirect exact from='/robin' to='/users' />
    <Redirect exact from='/batman' to='/courses' /> // having them like this works fine
</Switch>

Reference https://github.com/ReactTraining/react-router/issues/4837

answered Apr 26, 2020 at 18:20

chandawarlokesh

1045 bronze badges

1 Comment

sebaslh12 Over a year ago

Yeap I did try it, that code you posted actually works the issue is when I do it with a map

Collectives™ on Stack Overflow

Adding Redirects programmatically to React Router

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related