Reagieren-router-urls funktionieren nicht, wenn das aktualisieren oder manuell schreiben

_{Blick auf die Kommentare auf die akzeptierte Antwort, und der generische Charakter dieser Frage ("don'T work"), dachte ich, es wäre ein guter Ort für einige Allgemeine Erläuterungen über die Themen, die hier beteiligt sind. Also diese Antwort ist gedacht als hintergrund-info /Ausarbeitung, auf den konkreten Anwendungsfall der OP. Bitte Geduld mit mir.}

Serverseitige vs. clientseitige

Den ersten großen Sache zu verstehen ist, dass es jetzt 2 Orte, wo die URL interpretiert wird, in der Erwägung, dass es verwendet werden, um nur 1 in 'alten Tagen'. In der Vergangenheit, als das Leben noch einfach war, einige user schickte eine Anfrage für http://example.com/about an den server, der überprüft den Pfad-Teil der URL, bestimmt der Benutzer anfordert, die über die Seite und dann wieder zurück geschickt, die Seite.

Client-routing, was ist das, was Reagieren-Router bietet, sind die Dinge weniger einfach. Auf den ersten, der Kunde keinen JS code geladen noch. Wenn also der erste Antrag wird immer an den server. Das wird dann wieder eine Seite, die enthält Skript-tags auf Last Reagieren und Reagieren, Router etc. Nur wenn diese Skripte geladen haben, hat die phase 2 starten. In phase 2, wenn der Benutzer klickt auf den "Über uns" - Navigations-link zum Beispiel, die URL ist geändert nur lokal zu http://example.com/about (möglich gemacht durch die History API), aber keine Anfrage an den server gemacht wird. Stattdessen Reagieren Router macht seine Sache auf der client-Seite, bestimmt, die Reagieren view zu Rendern und es rendert. Vorausgesetzt, dass Ihr über die Seite nicht brauchen, um alle REST-Aufrufe, es ist bereits getan. Sie haben umgestellt, von zu Hause aus Über Uns ohne server-Anfrage mit ausgelöst.

Also im Grunde, wenn Sie auf einen link klicken, Javascript läuft, ändert sich die URL in der Adressleiste, ohne dass eine Aktualisierung der Seite, was wiederum dazu führt, Reagieren die Router zum durchführen einer Seite übergang auf der client-Seite.

Aber jetzt überlegen, was passiert, wenn man copy-paste die URL in die Leiste Adresse und e-mail es zu einem Freund. Dein Freund hat nicht geladen wird Ihre website noch. In anderen Worten, Sie ist immer noch in phase 1. Nicht Reagieren-Router ist auf Ihrem Rechner noch nicht. Also Ihr browser eine server-Anfrage zu http://example.com/about.

Und das ist, wo dein Problem beginnt. Bis jetzt, Sie bekommen konnte Weg mit nur platzieren einer statischen HTML-Code auf den webroot des Servers. Aber das hätte 404 Fehler für alle anderen URLs , wenn vom server angefordert. Die gleichen URLs funktionieren auf der client-Seite, weil es Router Reagieren, tun Sie das routing für Sie, aber Sie scheitern auf der server-Seite, es sei denn, Sie stellen Ihren server zu verstehen.

Die Kombination von server - und client-routing

Wenn Sie möchten, dass die http://example.com/about URL zu arbeiten, sowohl auf der server - und der client-Seite müssen Sie die Routen, für die es sowohl auf der server - und der client-Seite. Macht Sinn, oder?

Und dies ist, wo Ihre Möglichkeiten beginnen. Lösungen reichen von der Umgehung des Problems insgesamt, über eine catch-all-route, gibt die bootstrap-HTML, um die full-on isomorph Ansatz, bei dem sowohl der server als auch der client den gleichen JS-code.

.

Umgehen das problem insgesamt: Hash-Geschichte

Mit Hash-Geschichte statt Browser-Geschichte, Ihre URL für die über-Seite würde wie folgt Aussehen:
http://example.com/#/about
Der Teil nach der Raute (#) symbol ist nicht an den server gesendet. Also der server sieht nur http://example.com/ und sendet die index-Seite als erwartet. Reagieren-Router holt das #/about Teil und zeigen Sie die richtige Seite.

Nachteile:

• 'hässlich' URLs
• Server-side-rendering ist nicht möglich, mit diesem Ansatz. So weit wie Suchmaschinen-Optimierung (SEO) betrifft, ist Ihre website besteht aus einer einzigen Seite mit kaum Inhalt.

.

Catch-all

Mit diesem Ansatz, die Sie tun, verwenden Sie die Browser-Historie, aber gerade das einrichten einer catch-all auf dem server, sendet /* zu index.html, so dass Sie viel die gleiche situation wie bei den Hash-Geschichte. Sie haben saubere URLs jedoch und Sie könnten Verbesserung die auf diesem Schema, später die zimmerreserviereung, ohne das Sie ungültig werden alle Ihre Benutzer Favoriten.

Nachteile:

• Komplexer einzurichten
• Noch keinen guten SEO

.

Hybrid

In der hybrid-Ansatz, erweitern Sie auf die catch-all-Szenario durch das hinzufügen von speziellen Skripten für bestimmte Routen. Sie könnten, machen einige einfache PHP-Skripte zurück, die wichtigsten Seiten Ihrer Website mit content enthalten, also Googlebot kann zumindest sehen, was auf Ihrer Seite.

Nachteile:

• Noch komplexer zum einrichten
• Nur gute SEO für diejenigen, die Routen, die Sie geben, die eine Besondere Behandlung
• Duplizieren von code für das Rendern der Inhalte auf dem server-und client -

.

Isomorph

Was passiert, wenn wir verwenden, Node JS, wie unsere server, damit wir laufen können die gleichen JS-code an beiden enden? Nun, wir haben alle unsere Routen definiert, die in einer einzigen Reaktion-router config, und wir brauchen nicht zu duplizieren unsere rendering-code. Dies ist die 'der Heilige Gral', so zu sprechen. Der server schickt die exakt gleichen markup wie wir enden würden, wenn die Seite den übergang passiert hatte, auf dem client. Diese Lösung ist optimal in Bezug auf SEO.

Nachteile:

• Server muss (können) ausführen von JS. Ich habe experimentierte mit Java ich.c.w. Nashorn, aber es ist nicht für mich arbeiten. In der Praxis bedeutet meist müssen Sie einen Node-JS-server.
• Vielen kniffligen Umweltfragen (mit window auf server-Seite etc)
• Steile Lernkurve

.

Welches sollte ich nutzen?

Wählen Sie die, die Sie bekommen können Weg mit. Ich persönlich denke, die catch-all ist einfach zu set-up, also das wäre mein minimum. Dieses setup ermöglicht es Ihnen, zu verbessern, auf die Dinge im Laufe der Zeit. Wenn Sie schon mit Node JS als server-Plattform, würde ich auf jeden Fall untersuchen, macht ein isomorph, app. Ja, es ist hart, auf den ersten, aber sobald man den Dreh raus, es ist tatsächlich eine sehr elegante Lösung für das problem.

Also im Grunde, für mich, das wäre der entscheidende Faktor. Wenn mein server läuft auf Node JS, ich würde gehen isomorph; sonst würde ich gehen für die Catch-all Lösung und einfach ausbauen (Hybrid-Lösung) mit fortschreitender Zeit-und SEO-Anforderungen es verlangen.

Wenn Sie möchten, um mehr darüber zu erfahren isomorph (auch genannt "universal") rendering mit Reagieren, gibt es einige gute tutorials zu dem Thema:

• Reagieren Sie auf die Zukunft mit isomorph apps
• Der Schmerz und die Freude der Schaffung isomorph apps in ReactJS
• Wie das Umzusetzen, Knoten + Reagieren Isomorph, JavaScript & Warum es wichtig ist

Auch, um Ihnen den Einstieg empfehle ich einen Blick auf einige starter-kits. Wählen Sie eine, die passt zu deinen Entscheidungen, die für den Technologie-stack (denken Sie daran, zu Reagieren ist einfach das V in MVC, müssen Sie mehr Dinge zu bauen, die eine volle app). Beginnen Sie mit der Suche auf der one veröffentlicht, die von Facebook selbst:

• Erstellen Sie Reagieren App

Oder wählen Sie eine der vielen von der community. Es gibt eine nette Seite, nun, das versucht, die index alle:

• Wählen Sie Ihr perfekt Reagieren-starter-Projekt

Ich begann mit diesen:

• Reagieren Isomorph Starterkit
• Reagieren Redux Universal Hot Beispiel

Derzeit bin ich mit einem home-brew-version von universal-rendering, die inspiriert wurde von den beiden starter-kits oben, aber Sie sind jetzt veraltet.

Viel Glück bei deiner Suche!

Für Reagieren Router V4 Benutzer:

Wenn Sie versuchen, dieses problem zu lösen, indem die Hash-Geschichte-Technik erwähnt in anderen Antworten, beachten Sie, dass

<Router history={hashHistory} >

funktioniert nicht in V4, nutzen Sie bitte HashRouter statt:

import { HashRouter } from 'react-router-dom'

<HashRouter>
  <App/>
</HashRouter>

Referenz:
https://reacttraining.com/react-router/web/api/HashRouter

Den router aufgerufen werden kann auf zwei verschiedene weisen, je nachdem ob die navigation erfolgt auf dem client oder auf dem server. Sie haben es konfiguriert für client-side-Betrieb. Der key-parameter ist der zweite zu dem run-Methode, die Lage.

Wenn Sie die Router Reagieren Link-Komponente, es blockiert die browser-navigation und Anrufe transitionTo zu tun, eine client-side navigation. Sie sind mit HistoryLocation, so nutzt das HTML5-history-API zu vervollständigen die illusion der navigation durch die Simulation der neuen URL in der Adressleiste. Wenn Sie mit älteren Browsern funktioniert es nicht. Du brauchst die HashLocation Komponente.

Wenn Sie auf aktualisieren Sie alle umgehen, Reagieren und Reagieren-Router-code. Der server bekommt die Anfrage für /joblist und es muss etwas zurückgeben. Auf dem server muss man den Pfad, der angefordert wurde, um die run Methode, um für Sie zu machen die richtige Ansicht. Sie können den gleichen Weg anzeigen, aber Sie werden wahrscheinlich brauchen einen anderen Anruf zu Router.run. Als Charles Punkte aus, die Sie verwenden können, URL-rewriting, dies zu behandeln. Eine weitere option ist die Verwendung einer node.js server, der alle Anforderungen verarbeitet und pass den Pfad Wert als Standort-argument.

In express, zum Beispiel, könnte es wie folgt Aussehen:

var app = express();

app.get('*', function (req, res) { //This wildcard method handles all requests

    Router.run(routes, req.path, function (Handler, state) {
        var element = React.createElement(Handler);
        var html = React.renderToString(element);
        res.render('main', { content: html });
    });
});

Beachten Sie, dass der Pfad der Anforderung übergeben wird, um run. Um dies zu tun, müssen Sie eine server-side-Ansicht-engine, die Sie übergeben können, das gerenderte HTML um. Es gibt eine Reihe von anderen überlegungen über renderToString und in Betrieb Reagieren auf den server. Sobald die Seite auf dem server gerendert wird, wenn die app Lasten des Kunden, es wird Rendern Sie erneut, die Aktualisierung der server-Seite HTML gerendert, wie gebraucht.

Dem Webpack Dev-Server hat eine option um dies zu ermöglichen. Öffnen package.json und fügen Sie --history-api-fallback.
Diese Lösung funktionierte für mich.

https://github.com/reactjs/react-router-tutorial/tree/master/lessons/10-clean-urls#configuring-your-server

Dies kann Ihr problem lösen

Ich auch vor dem gleichen problem, in ReactJS Anwendung im Produktions-Modus.
Hier ist die 2 die Lösung für das problem.

1.Ändern Sie die routing-Geschichte zu "hashHistory" statt browserHistory in den Ort der

 <Router history={hashHistory} >
   <Route path="/home" component={Home} />
   <Route path="/aboutus" component={AboutUs} />
 </Router>

Bauen jetzt die app mit dem Befehl

sudo npm run build

Dann den build-Ordner in dein Verzeichnis/var /www/Ordner, Jetzt ist die Anwendung ist in Ordnung, die mit der Ergänzung der # tag in jeder url. wie

localhost/#/home
localhost/#/aboutus

Lösung 2 : Ohne # - tag mit browserHistory,

Setzen Sie Ihre Geschichte = {browserHistory} in deinem Router,Jetzt bauen es mit Hilfe von sudo npm führen Sie build.

Benötigen Sie die "conf" Datei zu lösen, die 404 not found Seite
die conf-Datei sollte wie folgt sein.

öffnen Sie Ihre terminal-Typ der weiter unten genannten Befehle

cd /etc/apache2/sites-available
ls
nano-Beispiel.conf
Fügen Sie den unten in diesem content.

 <VirtualHost *:80>
    ServerAdmin admin@0.0.0.0
    ServerName 0.0.0.0
    ServerAlias 0.0.0.0
    DocumentRoot /var/www/html/

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
    <Directory "/var/www/html/">
            Options Indexes FollowSymLinks
            AllowOverride all
            Require all granted
    </Directory>
</VirtualHost>

Nun müssen Sie zum aktivieren der Probe.conf-Datei mithilfe des folgenden Befehls

cd /etc/apache2/sites-available
sudo a2ensite sample.conf

dann wird es Sie bitten, laden Sie den apache-server,mit
sudo service apache2 reload oder restart

dann öffnen Sie Ihre localhost/build-Ordner und fügen Sie die .htaccess Datei mit dem Inhalt unten.

   RewriteEngine On
   RewriteBase /
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteCond %{REQUEST_FILENAME} !-d
   RewriteCond %{REQUEST_FILENAME} !-l
   RewriteRule ^.*$ / [L,QSA]

Nun die app funktioniert wie gewohnt.

Hinweis: ändern 0.0.0.0 ip an Ihre lokale ip-Adresse.

Wenn irgendwelche Zweifel bezüglich dieser fühlen Sie sich frei, um ein Kommentar.

Ich hoffe, es ist hilfreich für andere.

Herstellung stack: Reagieren, Reagieren Router v4, BrowswerRouter, Express, Nginx

1) Benutzer BrowserRouter für pretty urls

//app.js

import { BrowserRouter as Router } from 'react-router-dom'

const App = () {
  render() {
    return (
        <Router>
           //your routes here
        </Router>
    )
  }
}

2) Hinzufügen index.html um alle unbekannten Anfragen mithilfe /*

//server.js

app.get('/*', function(req, res) {   
  res.sendFile(path.join(__dirname, 'path/to/your/index.html'), function(err) {
    if (err) {
      res.status(500).send(err)
    }
  })
})

3) bundle webpack mit webpack -p

4) laufen nodemon server.js oder node server.js

EDIT: Sie möchten, dass nginx verarbeiten diese in den server blockieren und ignorieren Sie Schritt 2:

location / {
    try_files $uri /index.html;
}

Versuchen hinzufügen ".htaccess" - Datei in den öffentlichen Ordner mit dem code unten.

RewriteEngine On
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

RewriteRule ^ /index.html [L]  

Dieses Thema ist ein bisschen alt, und gelöst, aber ich möchte vorschlagen, eine einfach, klare und bessere Lösung. Es funktioniert, wenn Sie web server.

Jeder web-server hat eine Möglichkeit zum umleiten der Benutzer auf eine Fehlerseite im Falle von http 404. Um dieses Problem zu lösen, müssen Sie umleiten Benutzer auf der index-Seite.

Wenn Sie Java-base-server (tomcat oder java application server) die Lösung könnte die folgende sein:

web.xml:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">

    <!-- WELCOME FILE LIST -->
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>

    <!-- ERROR PAGES DEFINITION -->
    <error-page>
        <error-code>404</error-code>
        <location>/index.jsp</location>
    </error-page>

</web-app>

Beispiel:

• BEKOMMEN http://example.com/about
• Web-server wird von http 404, da diese Seite nicht existiert auf der server-Seite
• die Fehler-Seite Konfiguration informiert den server, senden Sie die index.jsp-Seite an den Benutzer
• dann JS macht den rest der Arbeit auf den clien-Seite, da die url auf die client-Seite ist noch http://example.com/about.

Ist, dass es keine Zauber mehr braucht:)

Wenn Sie einen fallback auf Ihre index.html stellen Sie sicher, dass in Ihrem index.html -Datei Sie haben diese:

<script>
  System.config({ baseURL: '/' });
</script>

Das kann sich von Projekt zu Projekt.

Wenn Sie mit FB alle Sie tun müssen ist, stellen Sie sicher, Sie haben eine schreibt-Eigenschaft in Ihre Feuerstellung.json-Datei in das Stammverzeichnis Ihrer app (im hosting-Bereich).

Beispiel:

{ 
  "hosting": {
    "rewrites": [{
      "source":"**",
      "destination": "/index.html"
    }]    
  }
}

Hoffe, das spart jemand anderes ein Hort der frustration und verschwendet Zeit.

Happy coding...

Weiterführende Literatur zum Thema:

https://firebase.google.com/docs/hosting/full-config#rewrites

FB CLI: "Konfigurieren Sie wie eine single-page-app (schreiben alle urls /index.html)"

Wenn Sie in IIS gehostet wird ; das Hinzufügen dieser zu meinem webconfig mein problem gelöst

    <httpErrors errorMode="Custom" defaultResponseMode="ExecuteURL">
        <remove statusCode="500" subStatusCode="100" />
        <remove statusCode="500" subStatusCode="-1" />
        <remove statusCode="404" subStatusCode="-1" />
        <error statusCode="404" path="/" responseMode="ExecuteURL" />
        <error statusCode="500" prefixLanguageFilePath="" path="/error_500.asp" responseMode="ExecuteURL" />
        <error statusCode="500" subStatusCode="100" path="/error_500.asp" responseMode="ExecuteURL" />
    </httpErrors>

Können Sie ähnliche Konfiguration für andere server

Wenn Sie Express oder irgendeinem anderen framework im backend , können Sie hinzufügen, die eine ähnliche Konfiguration wie unten und überprüfen Sie die Webpack public-Pfad in der Konfiguration, es sollte funktionieren, auch auf neu laden, wenn Sie mit BrowserRouter

` expressApp.get('/*', (request, response) => {
    response.sendFile(path.join(__dirname, '../public/index.html'));
  });`

Ich hatte das gleiche problem und diese Lösung für uns gearbeitet..

Hintergrund:

Sind wir hosten mehrerer Anwendungen auf dem gleichen server. Wenn wir aktualisieren die server würden nicht verstehen, wo sehen Sie unsere index in den dist-Ordner für die jeweilige app. Der obige link führt Sie zu dem, was für uns gearbeitet... Hoffe, das hilft, wie wir haben, verbrachte Stunden auf, herauszufinden, eine Lösung für unsere Bedürfnisse.

Benutzen wir:

package.json

"dependencies": {
"babel-polyfill": "^6.23.0",
"ejs": "^2.5.6",
"express": "^4.15.2",
"prop-types": "^15.5.6",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-redux": "^5.0.4",
"react-router": "^3.0.2",
"react-router-redux": "^4.0.8",
"redux": "^3.6.0",
"redux-persist": "^4.6.0",
"redux-thunk": "^2.2.0",
"webpack": "^2.4.1"
}

meine webpack.config.js

webpack.config.js

/* eslint-disable */
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const babelPolyfill = require('babel-polyfill');
const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/views/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    'babel-polyfill', './app/index.js'
  ],
  output: {
    path: __dirname + '/dist/your_app_name_here',
    filename: 'index_bundle.js'
  },
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'babel-loader',
      query : {
          presets : ["env", "react", "stage-1"]
      },
      exclude: /node_modules/
    }]
  },
  plugins: [HTMLWebpackPluginConfig]
}

meine index.js

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import Routes from './Routes'
import { Provider } from 'react-redux'
import { createHistory } from 'history'
import { useRouterHistory } from 'react-router'
import configureStore from './store/configureStore'
import { syncHistoryWithStore } from 'react-router-redux'
import { persistStore } from 'redux-persist'

const store = configureStore();

const browserHistory = useRouterHistory(createHistory) ({
  basename: '/your_app_name_here'
})
const history = syncHistoryWithStore(browserHistory, store)

persistStore(store, {blacklist: ['routing']}, () => {
  console.log('rehydration complete')
})
//persistStore(store).purge()


ReactDOM.render(
    <Provider store={store}>
      <div>
        <Routes history={history} />
      </div>
    </Provider>,
  document.getElementById('mount')
)

meine app.js

var express = require('express');
var app = express();

app.use(express.static(__dirname + '/dist'));
//app.use(express.static(__dirname + '/app/assets'));
app.set('views', __dirname + '/dist/your_app_name_here');
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

app.get('/*', function (req, res) {
    res.render('index');
});

app.listen(8081, function () {
  console.log('MD listening on port 8081!');
});

Für diejenigen, die mit IIS-10, das ist, was Sie tun sollten, um dieses Recht. Werden Sie sicher, dass Sie browserHistory mit diesem. Als Referenz gebe ich den code für das routing, aber das ist nicht das, was zählt, was zählt, ist der nächste Schritt, nachdem die Komponente folgenden code:

class App extends Component {
    render() {
        return (
            <Router history={browserHistory}>
                <div>
                    <Root>
                        <Switch>
                            <Route exact path={"/"} component={Home} />    
                            <Route path={"/home"} component={Home} />
                            <Route path={"/createnewproject"} component={CreateNewProject} />
                            <Route path={"/projects"} component={Projects} />
                            <Route path="*" component={NotFoundRoute} />
                        </Switch>
                    </Root>
                </div>
            </Router>
        )
    }
}
render (<App />, window.document.getElementById("app"));

Da das problem ist IIS empfängt die Anfrage vom client-Browser interpretiert wird die URL als wenn es fragt nach einer Seite, und gibt dann eine 404-Seite, da es keine verfügbare Seite. Das folgende tun:

1. Öffnen Sie den IIS -
2. Erweitern Sie Server, dann öffnen Sie den Ordner Sites
3. Auf die website/Anwendung
4. Gehen, um die Fehler-Seiten
5. Öffnen Sie die 404-Fehler-status-Element in der Liste
6. Statt der option "Inhalt Einfügen von statischen Datei in den Fehler-Antwort", ändern Sie ihn auf "Ausführen eine URL, die auf dieser Website" und fügen Sie "/" slash-Wert an die URL an.

Und es funktioniert jetzt einwandfrei.

Ich hoffe, es hilft. 🙂

Fixierung des "nicht BEKOMMEN kann /URL" - Fehler auf "aktualisieren" oder über den Aufruf der URL direkt.

Konfigurieren Sie Ihre webpack.config.js zu erwarten, dass die gegebenen link Strecken wie dieser.

module.exports = {
  entry: './app/index.js',
  output: {
       path: path.join(__dirname, '/bundle'),
       filename: 'index_bundle.js',
       publicPath: '/'
    },

Hinzufügen weitere Informationen zu Joshua Dyck ' s Antwort.

Wenn Sie FB nutzen möchten und sowohl die Wurzel Weg und ein sub-directory-route, die Sie müssen, fügen Sie den folgenden code in Ihre firebase.json:

{
  "hosting": {
    "rewrites": [
      {
        "source": "*",
        "destination": "/index.html"
      },
      {
        "source": "/subdirectory/**",
        "destination": "/subdirectory/index.html"
      }
    ]
  }
}

Beispiel:

Bauen Sie eine website für einen Kunden. Sie möchten, dass der Besitzer der website, um Informationen hinzuzufügen, die in https://your.domain.com/management, während die Benutzer der website navigieren Sie zu https://your.domain.com.

In diesem Fall Ihre firebase.json Datei wird wie folgt Aussehen:

{
  "hosting": {
    "rewrites": [
      {
        "source": "*",
        "destination": "/index.html"
      },
      {
        "source": "/management/**",
        "destination": "/management/index.html"
      }
    ]
  }
}

Komplette Router mit Beispiel (Reagieren Router v4):

Beispiel funktioniert Beispielsweise Überprüfen Sie heraus das Projekt weiter unten.

https://github.com/eh3rrera/react-router-4-example

Nach dem download

1.) "npm install" im cmd zum installieren von project

2.) "npm Start" starten Sie Ihre app reagieren

Hinweis : Sie müssen den Node-js software zu laufen im windows. Mac OS Knoten Standard.

Cheers