路径配置

如何设置指定某地址为默认打开地址

在项目启动后,默认打开的地址是/,若要设置为其他路由地址,可以在src/router/list.js文件中配置routerList变量即可

// ./src/router/list.js
import auto from "./auto";
import loadable from "@loadable/component";
import { Redirect } from "react-router-dom";
const Error = loadable(() => import("@pages/err"));

const defaultArr = [
  {
    path: "/", // 访问地址
    key: "index",
    to: "/details/person", // 重定向到 ....
    components: Redirect, // 重定向组件
  },
  // .......
];
const list = auto.map((c) => ({ ...c, components: loadable(c.components) }));

list.push(...defaultArr);

export default list;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

修改项目 base 路由前缀

找到.env-cmdrc.js文件进行如下修改即可。

const devConfig = {
  REACT_APP_ROUTERBASE: "/abc", // react路由基础路径 /abc
};
1
2
3

修改打包生产的文件夹

找到.env-cmdrc.js文件进行如下修改即可。

const productionCfg = {
  BUILD_PATH: "test", // 打包 文件夹名称 test文件夹
};
1
2
3

打包之后静态资源加载失败

因为create-react-app打包,默认把镜头资源指向 url的根路径。

  • 举例

假设你的网站地址为:https://wwww.xxxxx.com

现在你想把项目放在这个网站的二级域名下如:https://wwww.xxxxx.com/blog 但是你没有修改.env-cmdrc.js里的PUBLIC_URL属性,所以就会发现静态文件 404。因为它们都以根目录去访问。所以会出现上述情况。

解决这种办法去修改.env-cmdrc.js里的PUBLIC_URL属性即可




 




{
  "REACT_APP_ROUTERBASE": "/react-ant-admin", // react路由基础路径
  "REACT_APP_API_BASEURL": "/api/react-ant-admin", //请求地址
  "PUBLIC_URL": "/blog",// 静态文件路径 这个时候你可以 https://wwww.xxxxx.com/blog/xxx.js 正常访问静态资源了
  "NODE_ENV": "production", // 打包模式 生产模式
  "BUILD_PATH": "react-ant-admin", // 打包 文件夹名称
}
1
2
3
4
5
6
7

TIP

希望.env-cmdrc.js里的PUBLIC_URL属性,REACT_APP_ROUTERBASE,这两个的值相同,否则不管是运行还是打包都会发生意想不到的事情!

React-Router 使用哈希模式(#)

只需要在.env-cmdrc.js 的启动模式下加上REACT_APP_ROUTER_ISHASH字段并且值为1即可。

{
 "REACT_APP_ROUTER_ISHASH": "1", // 启用哈希模式
}
1
2
3