无法导航到react-router-dom URL

Question

上有这么几个主题，比如这一次其建议更改的WebPack和这一个是建议建立一个包罗万象的。

我在三条路线上使用react-router-dom ; 类似于这里的其他问题的故事， / path有效，但/cars或/about都没有。

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')
);

我曾尝试加入publicPath和historyApiFallback到我的WebPack配置：

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
  }
}

但是当我导航到http://localhost:8080/cars我在浏览器上收到一条Cannot GET /cars消息，并出现类似这样的错误：

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

通常在尝试自己解决这个问题30分钟后，感到沮丧并在SO上发布; 我在2分钟后想出来......！

我添加到我的webpack文件中的配置毫无意义; 因为我正在使用express服务我的文件

我需要的是catch-all方法，但我做错了。 你有两个选择。 做一个正确的“全部捕获”并将所有内容发送到HTML文件...

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

或者，如果像我一样，你只想发送一个特定的端点，那么你仍然可以管理“其他东西”......

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

特别提一下，因为这就是让我失望的事情，确保你/react*/而不是/react/*

然后我可以将我的路线更新为以下内容并直接浏览到它们......

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

我有同样的问题，并能够解决它，通过改变我的服务器实现使用快递与“捕获所有并发送到index.html”OmisNomis建议。

在这里添加我的server.js代码给任何以前没有快递知识的人

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")