时间戳

首页 > 解决方案 > 将 React 应用程序部署到 Apache 服务器后，Route Param 无法与 React 一起使用

javascript - 将 React 应用程序部署到 Apache 服务器后，Route Param 无法与 React 一起使用

问题描述

我已经创建了 React 应用程序并在我的应用程序中使用了 react-router。我在 Route 中使用了路由器参数。每当我尝试在本地访问时，它都可以正常工作，但是当我部署到 apache 服务器时，路由参数链接不起作用。请帮我。

我的反应路由器代码：

<BrowserRouter basename="tryloka_stg_app">
      <Switch>
        <Route exact path="/" component={Home} />

        <Route exact path="/partner" component={Partner} />
        <Route exact path="/signup" component={SignUp} />
        <Route exact path="/signupOTP" component={SignUpOTP} />
        <Route exact path="/signupBirthday" component={SignupBirthday} />
         <Route exact path="/confirmPassword/:id" component={ConfirmPassword} />
  

        <Route component={NotFound} />
      </Switch>
    </BrowserRouter>

每当我尝试在生产中访问http://35.181.69.171/tryloka_stg_app/confirmPassword/14时，它都会显示一个没有错误的空白页面。但是当我像localhost:3000/tryloka_stg_app/confirmPassword/14这样访问本地主机时，它工作正常。 服务器中的构建文件位置是 /var/www/html/tryloka_stg_app

我的 .htaccess 文件：

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ /tryloka_stg_app/index.html [QSA,L]

我的 package.json 文件：

{
  "name": "tryloka",
  "homepage": ".",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@date-io/date-fns": "^2.10.8",
    "@fortawesome/fontawesome-free": "^5.15.2",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "@material-ui/pickers": "^3.3.10",
    "@syncfusion/ej2-react-calendars": "^18.4.48",
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.2",
    "@testing-library/user-event": "^12.2.2",
   
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "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"
    ]
  }
}

标签： javascriptreactjsreact-router

解决方案

将 React 应用程序部署到子目录

将基本名称添加到您已经完成的路线

相应地在 package.json 的主页中进行更改

"主页": "http://35.181.69.171/tryloka_stg_app",

推荐阅读