在Firebase上托管时，React路由器不会路由流量 [英] React router doesn't route traffic when hosted on firebase

问题描述

因此，这几乎只是creat-react-app和firbase init的乘积.当我执行npm start时，它的工作原理与预期的完全一样，但是当我将程序包上传到firebase时，我唯一能打到的页面是/路径.即使我切换了这些组件，它们也会在/路径中被击中.

So this is pretty much just the product of creat-react-app and firbase init. It works exactly as expected when I do npm start but when I upload the package to firebase, the only page I am able to hit is at the / path. Even if I switch the components, they one on the / path will be hit.

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;

index.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

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中删除了主要标签，并将BrowserRouter从index.js移至了App.js，并用Switch标签包装了

I removed the main tag from App.js and moved the BrowserRouter from index.js to App.js, wrapping the Switch tag with it

推荐答案

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

You need to make sure the rewrites are enabled in your Firebase hosting configuration to redirect all requests to your index.html file. This assumes you are using 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"}]}
    ]
  }
}

Firebase的 init 命令实际上提供了创建项目时的选项.

The init command for Firebase actually provides this is an option when creating a project.

您将需要重新部署 firebase deploy 来传播更改.

You will need to redeploy firebase deploy to propagate the changes.

更新:使用上述 firebase.json 托管配置，以下 index.js 和 App.js ，我能够使用 npm run build 紧跟 react-router-dom 路由，并成功部署 create-react-app > firebase部署.

Update: With the aforementioned firebase.json hosting configuration the following index.js and App.js, I was able to successfully deploy a create-react-app with working react-router-dom routing using npm run build following by firebase deploy.

index.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;

希望有帮助！

这篇关于在Firebase上托管时，React路由器不会路由流量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！