react basename 设置 - Githubissues

react 使用环境

平时业务开发当中，经常遇到项目部署，域名地址映射的问题，例如项目部署域名为 https://test.com/path/project-01, 其中 path/project-01，就是项目部署的路径，这时需要我们项目对 path/project-01 路由做匹配映射。下面是开发环境

    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0"

首先 router.js 配置


import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { createBrowserHistory } from "history";
import Login from "./views/Login/index";
import Home from "./views/Home/index";
import AppRouter from './router/index'
const customHistory = createBrowserHistory();

<Router history={customHistory} basename="/path/project-01/">
  <Switch>
    <Route exact  path="/" component={Login} />
    <Route path="/home" exact component={Home} />
  </Switch>
</Router>

这时路由的地址分别是 https://test.com/path/project-01/home, https://test.com/path/project-01/home

此时，还需要 webpack 对应的进行修改，在 config/webpack.config.js 下 215 行
```
publicPath: isEnvProduction ? "/path/project-01" : paths.publicUrlOrPath,
```

isEnvProduction --> 可以根据生产环境或者测试环境，做不同的路由处理，对应的如果访问路由要修改的情况下，同样一起做调整

sanlangguo / learn-notes

react basename 设置 #11

react 使用环境