Добавление перенаправлений программно в React Router

Question

Я пытаюсь добавить группу перенаправлений, учитывая массив старых маршрутов и новых маршрутов, поэтому я разработал этот компонент:

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} />} />)
);

, который работает нормально, но я хотел, чтобы это было проще поэтому я удалил Route и оставил только перенаправление следующим образом:

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

Но это не сработает, все перенаправления приведут меня к последнему маршруту, который в данном случае равен /courses, и это странно, потому что, если я делаю это:

<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>

Так что нет смысла для них терпеть неудачу, когда я создаю их с помощью карты, и я не нашел ничего, что привело бы ни к причине, ни к решению.

Answer 1

Вам нужно обернуть экспортированные перенаправления в переключатель:

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

export default Redirects;

Это только если вам действительно нужно сделать из них компонент. Не совсем понятно, что вам нужно и что вы ищете, так как export default Redirects = () => неверный синтаксис. Если вы просто хотите связать их как некоторую переменную, вы можете сделать:

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>

Answer 2

Вы пробовали это с точными опорами

<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>

Ссылка https://github.com/ReactTraining/react-router/issues/4837