如何更改 create react app 的 base url？

Question

我正在使用 react-router-dom 和 create-react-app。

运行脚本 yarn start，它以 http://localhost:3000/(myprojectname) 开头，不是 http://localhost:3000/

当使用 react-router-dom 进行路由时，我必须从 url 中删除 myprojectname，然后添加页面路由。

项目初始设置好像有问题，

如何从 http://localhost:3000/ 开始？？

添加package.json，路由器代码。

package.json:

{
  "name": "cau-burger-online-order-system",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-router-dom": "^5.3.2",
    "@types/styled-components": "^5.1.16",
    "axios": "^0.24.0",
    "bootstrap": "^5.1.3",
    "brace-expansion": "^2.0.1",
    "gh-pages": "^3.2.3",
    "prettier": "^2.5.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "5.3.0",
    "react-scripts": "4.0.3",
    "styled-components": "^5.3.3",
    "typescript": "^4.1.2",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "homepage": "https://myprojectname"
}

App.tsx:

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import './App.css'

import { Route, BrowserRouter as Router, Switch } from 'react-router-dom'

import Detail from 'pages/detail/Detail'
import GlobalStyle from './GlobalStyle'
import Home from 'pages/home/Home'
import Login from 'pages/login'
import Signup from 'pages/signup'

function App() {
  return (
    <Router>
      <GlobalStyle />
      <div className="App">
        <div className="auth-wrapper">
          <Switch>
            <Route exact path="/" component={Login} />
            <Route path="/login" component={Login} />
            <Route path="/signup" component={Signup} />
            <Route path="/home" component={Home} />
            <Route path="/detail" component={Detail} />
          </Switch>
        </div>
      </div>
    </Router>
  )
}

export default App

Answer 1

我在 https://v5.reactrouter.com/web/api/Redirect 上找到了一些有用的信息 “呈现将导航到新位置。新站点将像服务器端重定向 (HTTP 3xx) 一样覆盖历史堆栈中的当前位置。”

有什么方法可以共享您的存储库吗？我会是帮助你的最好方式。差不多了，我需要更多的信息来帮助你。

Answer 2

在您的 package.json 文件中，将 homepage 条目更改为相对路径，不包括任何 sub-domain/nested 目录。

{
  "name": "cau-burger-online-order-system",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    ....
  },
  "scripts": {
    ...
  },
  ...,
  "homepage": "https://hy57in.github.io/2021-Industry-Hands-On-Project"
}

到

{
  "name": "cau-burger-online-order-system",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    ...
  },
  "scripts": {
    ...
  },
  ...,
  "homepage": "./"
}

如何更改 create react app 的 base url？

How to change base url of create react app?

reactjs

create-react-app

react-router-dom