如何更改创建反应应用程序的基本网址？

Posted 2023-02-22

【中文标题】如何更改创建反应应用程序的基本网址？

【英文标题】：How to change base url of create react app?

【发布时间】：2022-01-14 20:14:06

【问题描述】：

我正在使用 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://hy57in.github.io/2021-Industry-Hands-On-Project"

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

【问题讨论】：

你能分享你的package.json文件吗？您可能只需要编辑homepage 条目。或者，如果您打算将应用程序部署到服务器上的嵌套目录中，则可以在路由器上指定 basename 属性。

你可以在这里添加你的路由器代码吗？

将homepage改为"./"，然后在本地重试。

@DrewReese 像这样更改<Route exact path="./" component=Login /> 没有任何区别。

Nono，在您的package.json 文件中，将homepage 条目更新为"./"...在您的应用程序中保留您的路线路径。

【参考方案1】：

在您的 package.json 文件中，将 homepage 条目更改为相对路径，不包括任何子域/嵌套目录。

  "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": "./"

【参考方案2】：

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

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