localhost:3000/admin 工作，但托管 websiteurl/admin 后不工作答案

【问题标题】：localhost:3000/admin working but after hosting websiteurl/admin is not workinglocalhost:3000/admin 工作，但托管 websiteurl/admin 后不工作
【发布时间】：2021-03-04 16:32:55
【问题描述】：

firebase 部署的应用程序正在运行，但在 localhost:3000/admin 中它正在移动到该路线，但是在托管它的说页面后，当我搜索 websitename/admin 时找不到它会在按钮单击时转到网站名称/管理员，但如果我使用直接 url https://websitename/admin.web.app 来移动其显示的 404 html 页面

这是我的代码

import { BrowserRouter, Switch, Route } from "react-router-dom";
import Quizzes from './components/Admin/Quizzes'
import AddNewQuiz from './components/Admin/AddNewQuiz'
import AddQuestion from './components/Admin/AddQuestion'
import EditQuiz from './components/Admin/EditQuiz'
import ViewResults from './components/Admin/ViewResults'
import UQuizzes from './components/User/Quizzes'
import ViewQuizDetails from './components/User/ViewQuizDetails'
import QuizCard from './components/User/QuizCard'
import LeaderBoard from './components/User/LeaderBoard'
import AttemptedQuizzes from './components/User/AttemptedQuizzes'

import './App.css'

function App() {
  return (

    <BrowserRouter>
      <Switch>
        <Route exact={true} path="/">
          <div className="App">
            <UQuizzes />
          </div>
        </Route>
        <Route exact={true} path="/quizcard">
          <div className="App">
            <QuizCard />
          </div>
        </Route>
        <Route exact={true} path="/attemptedquizzes">
          <div className="App">
            <AttemptedQuizzes />
          </div>
        </Route>
        <Route exact={true} path="/leaderboard">
          <div className="App">
            <LeaderBoard />
          </div>
        </Route>

        <Route exact={true} path="/quizdetails">
          <div className="App">
            <ViewQuizDetails />
          </div>
        </Route>
        <Route exact={true} path="/admin">
          <div className="App">
            <Quizzes />
          </div>
        </Route>
        <Route exact={true} path="/addnewquiz">
          <div className="App">
            <AddNewQuiz />
          </div>
        </Route>
        <Route exact={true} path="/createquestion">
          <div className="App">
            <AddQuestion />
          </div>
        </Route>
        <Route exact={true} path="/editquiz/:fromAdd">
          <div className="App">
            <EditQuiz />
          </div>
        </Route>
        <Route exact={true} path="/results">
          <div className="App">
            <ViewResults />
          </div>
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

export default App;

【问题讨论】：

问题不清楚

标签： reactjs

【解决方案1】：

这是因为您将 React 应用程序用作单页应用程序。而且由于您将其用作单页应用程序，因此您必须配置您的主机以处理 URL 重写。（意味着每个请求都必须转发到 index.html）您可以在此处找到配置。 https://firebase.google.com/docs/hosting/full-config#rewrites

"hosting": {
  // ...

  // Serves index.html for requests to files or directories that do not exist
  "rewrites": [ {
    "source": "**",
    "destination": "/index.html"
  } ]
}

【讨论】：