[英]Can't navigate to react-router-dom URL's
There are a few topics on SO like this one which recommends changing Webpack and this one that recommends setting up a catch-all. 上有这么几个主题,比如这一次其建议更改的WebPack和这一个是建议建立一个包罗万象的。
I am using react-router-dom
for three routes; 我在三条路线上使用
react-router-dom
; similar story to the rest of the questions on here, the /
path works but neither /cars
or /about
does. 类似于这里的其他问题的故事,
/
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')
);
I have tried adding a publicPath
and historyApiFallback
into my webpack config: 我曾尝试加入
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
}
}
But as soon as I navigate to http://localhost:8080/cars
I get a Cannot GET /cars
message on the browser and a load of errors similar to this: 但是当我导航到
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.
Typically after trying to figure this out on my own for 30 minutes, getting frustrated and posting on SO; 通常在尝试自己解决这个问题30分钟后,感到沮丧并在SO上发布; I figured it out 2 minutes after...!
我在2分钟后想出来......!
The configuration I added into my webpack
file was pointless; 我添加到我的
webpack
文件中的配置毫无意义; seeing as I am serving my files using express
因为我正在使用
express
服务我的文件
The catch-all
method was what I needed, but I had done it wrong. 我需要的是
catch-all
方法,但我做错了。 You have two options. 你有两个选择。 Do a proper "catch all" and send everything to the HTML file...
做一个正确的“全部捕获”并将所有内容发送到HTML文件...
app.get('*', (req, res) => {
res.sendFile(appRootPath + '/public/index.html');
});
or, if like me, you want to only send a specific endpoint, so you can still manage 'other things' you can... 或者,如果像我一样,你只想发送一个特定的端点,那么你仍然可以管理“其他东西”......
app.get('/react*', (req, res) => {
res.sendFile(appRootPath + '/public/index.html');
});
A specific mention, because this is what tripped me up, make sure you do /react*/
and not /react/*
特别提一下,因为这就是让我失望的事情,确保你
/react*/
而不是/react/*
I could then update my Routes to the following and browse to them directly... 然后我可以将我的路线更新为以下内容并直接浏览到它们......
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')
);
I had the same problem and was able to solve it by changing my server implementation to use express with "catch all and send to index.html" as suggested by OmisNomis. 我有同样的问题,并能够解决它,通过改变我的服务器实现使用快递与“捕获所有并发送到index.html”OmisNomis建议。
Adding here my server.js code for anyone who has no previous knowledge of express 在这里添加我的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")
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.