欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vite使用react-router-config

程序员文章站 2022-05-17 07:54:06
...

React属于目前主流前端框架,但有一个缺点,创建项目很慢

npx create-react-app xxx

所以我一般使用Vite创建React项目

但最近发现一个问题:vite使用react-router-config,是不能在routes路由规则中进行重定向的。

最后解决方案是 不用react-router-config,自己封装了一个方法。(仅供参考)

class App extends React.Component {
  // 自己封装一个方法: 用来遍历输出Route
  // 判断 如果某一个规则中含有redirect属性
  // 就证明要重定向,那么就使用Route重定向的方式渲染
  // 否则就正常渲染
  renderRoutes = (Routes) => {
    console.log(Routes);
    return (
      <Switch>
        {Routes.map((item, index) => {
          if (item.redirect)
            return (
              <Route
                key={item.key || index}
                render={() => <Redirect to={item.redirect.to} />}
              />
            );
          return (
            <Route
              key={item.key || index}
              path={item.path}
              component={item.component}
            />
          );
        })}
      </Switch>
    );
  };

  render() {
    return <div></div>;
  }
}