Kann nicht zu reaid-router-dom navigieren URLs

Question

Es gibt ein paar Themen zu SO wie this one, das das Ändern von Webpack empfiehlt, und this one, das die Einrichtung eines Catch-Alls empfiehlt.

Ich verwende react-router-dom für drei Routen; ähnliche Geschichte mit dem Rest der Fragen hier, der / Weg funktioniert, aber weder /cars oder /about tut.

import React, {Component} from 'react'; 
import {render} from 'react-dom'; 
import {BrowserRouter, Route, Switch, Link} from 'react-router-dom'; 


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

const Car =() => (
    <h1>Cars</h1> 
) 

const About =() => (
    <h1>About</h1> 
) 

render(
    <BrowserRouter> 
    <Switch> 
     <Route exact path="/" component={Home}/> 
     <Route exact path="/cars" component={Car}/> 
     <Route path="/about" component={About}/> 
    </Switch> 
    </BrowserRouter>, 
    document.getElementById('container') 
); 

Ich habe versucht, ein publicPath und historyApiFallback in meine webpack Config hinzu:

module.exports = { 
    entry: ['./src/index.jsx'], 
    output: { 
    path: path.resolve('public'), 
    filename: 'bundle.js', 
    publicPath: '/' 
    }, 
    module: { 
    loaders: [ 
     {test: /\.js$/,loader: 'babel-loader',exclude: /node_modules/}, 
     {test: /\.jsx$/,loader: 'babel-loader',exclude: /node_modules/} 
    ] 
    }, 
    devServer: { 
    historyApiFallback: true 
    } 
} 

Aber sobald ich zu http://localhost:8080/cars navigieren Ich erhalte eine Cannot GET /cars Nachricht auf dem Browser und eine Last von Fehlern ähnlich wie dies:

Refused to load the font 'data:font/woff;base64,d09GRgABAAAAAGz8ABEAAAAA09gAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAABgAAAAC8AAAA0AsQC9UdQT1MAAAGwAAATuAAANLwBEyF1R1NVQgAAFWgAAAIWAAAEZqfk0PVPUy8yAAAXgAAAAFAAAABgaNCCw2NtYXAAABfQAAABkwAAAkQk8AV7Y3Z0IAAAGWQAAABiAAAAugGiQq9mcGdtAAAZyAAABZcAAAvNb3/BHGdhc3AAAB9gAAAACAAAAAgAAAAQZ2x5ZgAAH2gAAESvAAB8yu28l3FoZWFkAABkGAAAADYAAAA2BmibVWhoZWEAAGRQAAAAIAAAACQHMQRzaG10eAAAZHAAAAJDAAAEImBmMbxsb2NhAABmtAAAAhoAAAIaflxdR21heHAAAGjQAAAAIAAAACACjgzgbmFtZQAAaPAAAACdAAABKBQEL8lwb3N0AABpkAAAAsMAAAS9pi3QFXByZ...w76a3jVVUpJzXkBsRtNQoHWTV2mt2UusrulbnIrkvAXNBDFtTVIB8Uoau4pSruq4q7qq2dHpQADUAT0IJ5ra0yPUAfMACMFY6pOtegV/9D7UtTZx72tTeXI4JdcUXh7Pb67D7I/S05AwjAAiYsNie6WOwc4MiYCORSEx+ZExuCvQpiNSRmAdL8wDs2AslUOgp8HfnSYyfCYjrE7w8QDucyS0aXjH0zGk7FX991RgON6L7Qma6pQ+SzA0Qw1x9+HgNFtrBk+F9RsmDpTShvNJL4BDWtP8IAeAFj8N7BcCIoYiMjY1/kBsadHAwcDMkFGxnYnLZFMFgwMLAyaIE4DjzeHPYs+mzKLOIsrBxQoVA2VyZzFk0mWSawELfTPmEGAQYeBk4GNpBGTqCYgNM+BgcYhIgxM7hsVGHsCIzY4NARsZE5xWWjGoi3i6OBgZHFoSM5JAKkJBIIHHh8ORxZDNlUWSRZWHm0djD+b93A0ruRicFlA1vcRtYUFwBQJimV' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback. 

Answer 1

Regel nach dem Versuch, dies herauszufinden auf eigene Faust für 30 Minuten, frustriert und Veröffentlichung auf SO; Ich habe es 2 Minuten nach ... herausgefunden!

Die Konfiguration, die ich in meine webpack Datei hinzugefügt habe, war sinnlos; zu sehen, wie ich meine Dateien mit express

dienen Die catch-all-Methode war, was ich brauchte, aber ich hatte es falsch gemacht. Sie haben zwei Möglichkeiten. Sie eine richtige „alle fangen“ und alles zur HTML-Datei ...

app.get('*', (req, res) => { 
    res.sendFile(appRootPath + '/public/index.html'); 
}); 

oder, wenn man wie ich senden, Sie wollen nur einen bestimmten Endpunkt senden, so dass Sie immer noch ‚andere Dinge‘ verwalten Sie können ...

app.get('/react*', (req, res) => { 
    res.sendFile(appRootPath + '/public/index.html'); 
}); 

Eine besondere Erwähnung, weil es das, was mich ist gestolpert, stellen Sie sicher, Sie /react*/ und nicht /react/*

ich dann meine Routen zu den folgenden aktualisieren konnten und ihnen sehen directl y ...

render(
    <BrowserRouter> 
    <Switch> 
     <Route exact path="/react" component={Home}/> 
     <Route exact path="/react/car" component={Car}/> 
     <Route path="/react/about" component={About}/> 
    </Switch> 
    </BrowserRouter>, 
    document.getElementById('container') 
); 

Answer 2

hatte ich das gleiche Problem und konnte es lösen, indem sie meinen Server-Implementierung zu ändern Express zu verwenden, um mit „alle fangen und zu index.html senden“ von OmisNomis vorgeschlagen als .

hier Hinzufügen meines server.js Code für alle, die keine Vorkenntnisse in Express

haben

const express = require("express") 
const path = require("path") 
const app = express() 

app.use(express.static(__dirname)) 
app.get('*', (req, res) => res.sendFile(path.join(__dirname, '/index.html'))) 
app.listen(8080) 

console.log("Running at Port 8080")