无法导航到 react-router-dom URL

Posted

技术标签:

【中文标题】无法导航到 react-router-dom URL【英文标题】:Can't navigate to react-router-dom URL's 【发布时间】:2018-01-27 05:01:25 【问题描述】:

有一些关于 SO 的主题,例如建议更改 Webpack 的 this one 和建议设置包罗万象的 this one。

我在三个路由中使用react-router-dom;与此处的其他问题类似,/ 路径有效,但 /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')
);

我尝试在我的 webpack 配置中添加 publicPathhistoryApiFallback

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.

【问题讨论】:

我试过你的代码here,这对我有用。我知道这可能是您的 webpack 的问题,但只是指出代码本身没有问题。 谢谢@Rowland - 我刚刚想通了,所以会尽快发布答案:) 【参考方案1】:

通常在我自己尝试解决这个问题 30 分钟后,感到沮丧并在 SO 上发帖;我在 2 分钟后发现了...!

我添加到webpack 文件中的配置毫无意义;看到我正在使用 express 提供我的文件

catch-all 方法是我需要的,但我做错了。你有两个选择。做一个适当的“catch all”并将everything发送到 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')
);

【讨论】:

【参考方案2】:

我遇到了同样的问题,并且能够通过将我的服务器实现更改为使用带有“捕获所有并发送到 index.html”的 express 来解决它,正如 OmisNomis 所建议的那样。

在这里添加我的 server.js 代码,供以前没有 express 知识的人使用

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

【讨论】:

以上是关于无法导航到 react-router-dom URL的主要内容,如果未能解决你的问题,请参考以下文章

页眉/页脚导航 react-router-dom 和 antd 菜单和路由器问题

history.push 使用 react-router-dom

使用 react-router-dom 重新加载页面时出现问题

react-router-dom 实现左侧导航

CSS 模块在使用 react-router-dom 的导航栏上是“未定义的”

带有 react-router-dom NavLinks 的 react-bootstrap 导航栏中的 collapseOnSelect