Firebase React - маршрутизация не работает на эмуляторе firebase - PullRequest
Новая
       134

Firebase React - маршрутизация не работает на эмуляторе firebase

0 голосов
/ 21 июня 2020

У меня проблема с реактивной маршрутизацией на Firebase. В моем приложении маршрутизация работает нормально при запуске приложения с помощью react-scripts start, но когда дело доходит до его запуска в эмуляторе firebase, маршрутизация перестает работать - то же самое происходит после развертывания.

Каждый URL-адрес отображает мне домашний вид (/ ).

Код:

index. js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
    <App />,
  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();

Приложение js

import React, {Component} from 'react';
import './App.css';
import Home from './views/Home'
import {
    BrowserRouter as Router,
    Route,
} from 'react-router-dom'
import TermsAndConditions from "./views/TermsAndConditions";
import PrivacyPolicy from "./views/PrivacyPolicy";

class App extends Component {
    render() {
        return (
            <Router>
                <div>
                    <Route exact path="/" component={Home} />
                    <Route exact path="/terms-and-condition" component={TermsAndConditions} />
                    <Route exact path="/privacy-policy" component={PrivacyPolicy} />
                </div>
            </Router>
        );
    }
}

export default App;

firebase. json

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "build",
    "rewrites": [ {
      "source": "**",
      "destination": "/index.html"
    }],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  },
  "storage": {
    "rules": "storage.rules"
  }
}

1 Ответ

2 голосов
/ 21 июня 2020

Следует использовать компонент Switch вместо div

import React, {Component} from 'react';
import './App.css';
import Home from './views/Home'
import {
    BrowserRouter as Router,
    Switch,
    Route,
} from 'react-router-dom'
import TermsAndConditions from "./views/TermsAndConditions";
import PrivacyPolicy from "./views/PrivacyPolicy";

class App extends Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route path="/terms-and-condition" component={TermsAndConditions} />
                    <Route path="/privacy-policy" component={PrivacyPolicy} />
                </Switch>
            </Router>
        );
    }
}

export default App;
...