所以这几乎只是 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;
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
{
"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 标签
最佳答案
您需要确保在 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"}]}
]
}
}
Firebase 的 init
命令实际上在创建项目时提供了此选项。
您将需要重新部署 firebase 部署
来传播更改。
更新:使用上述 firebase.json
托管配置以下 index.js
和 App.js
,我能够使用 npm run build
成功部署 create-react-app
以及工作 react-router-dom
路由,然后使用 >firebase部署
。
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;
希望有帮助!
关于reactjs - React 路由器在 firebase 上托管时不会路由流量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52939427/