时间戳

首页 > 解决方案 > 以编程方式将重定向添加到 React Router

javascript - 以编程方式将重定向添加到 React Router

问题描述

我正在尝试在给定一组旧路由和新路由的情况下添加一堆重定向，所以我提出了这个组件：

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>

因此，当我使用地图创建它们并且我没有找到任何导致原因或解决方案的东西时，它们失败是没有意义的。

标签： javascriptreactjsreact-router

解决方案

您需要将导出的重定向包装在一个开关中：

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>

推荐阅读