React路由器在firebase上托管时不会路由流量

Question

所以这几乎只是 creat-react-app 和 firbase init 的产物。当我执行 npm start 时，它完全按预期工作，但是当我将包上传到 firebase 时，我唯一能够点击的页面位于 / 路径。即使我切换组件，它们在 / 路径上的一个也会被命中。

App.js 文件

import React, { Component } from 'react';
import './App.css';
import Ok from './Ok';
import {Route, Switch} from 'react-router-dom';
import Home from "./Home";

class App extends Component {
  render() {
    return (
            <main>
                <Switch>
                    <Route exact={true} path="/" component={Home}/>
                    <Route path="/ok" component={Ok}/>
                </Switch>
            </main>
    );
  }
}

export default App;

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import {BrowserRouter} from "react-router-dom";

ReactDOM.render((
    <BrowserRouter>
        <App />
    </BrowserRouter>), document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

firebase.json

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

目录结构

.
??? build
?   ??? asset-manifest.json
?   ??? favicon.ico
?   ??? index.html
?   ??? manifest.json
?   ??? precache-manifest.ecdffa8fba4446ec939aeb81deef8a46.js
?   ??? service-worker.js
?   ??? static
?       ??? css
?       ?   ??? main.62e37b1d.chunk.css
?       ?   ??? main.62e37b1d.chunk.css.map
?       ??? js
?       ?   ??? 1.c86c31d4.chunk.js
?       ?   ??? 1.c86c31d4.chunk.js.map
?       ?   ??? main.68e18920.chunk.js
?       ?   ??? main.68e18920.chunk.js.map
?       ?   ??? runtime~main.229c360f.js
?       ?   ??? runtime~main.229c360f.js.map
?       ??? media
?           ??? logo.5d5d9eef.svg
??? firebase.json
??? package.json
??? package-lock.json
??? public
?   ??? favicon.ico
?   ??? index.html
?   ??? manifest.json
??? README.md
??? src
    ??? App.css
    ??? App.js
    ??? App.test.js
    ??? Home.js
    ??? index.css
    ??? index.js
    ??? logo.svg
    ??? Ok.js
    ??? serviceWorker.js

回答：

我从 App.js 中删除了 main 标签，并将 BrowserRouter 从 index.js 移到了 App.js，用它包装了 Switch 标签

Answer 1

您需要确保在 Firebase 托管配置中启用了重写，以将所有请求重定向到您的 index.html 文件。这假设您正在使用 create-react-app：

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
    ]
  }
}

initFirebase的命令实际上提供了这是创建项目时的一个选项。

您将需要重新部署firebase deploy以传播更改。

更新：通过以上的firebase.json下列主机配置index.js和App.js，我是能够成功地部署create-react-app与工作react-router-dom路由使用npm run build由以下firebase deploy。

索引.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router } from "react-router-dom";

ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

应用程序：

import React, { Component } from 'react';
import { Route, Link, Switch } from "react-router-dom";
import './App.css';

const Home = () => <h1>Home</h1>;
const Ok = () => <h1>Ok</h1>;

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/ok">Ok</Link></li>
          </ul>
        </header>
        <main>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/ok" component={Ok} />
          </Switch>
        </main>
      </div>
    );
  }
}

export default App;

希望这有帮助！