Не удается перейти к URL-адресу react-router-dom

На SO есть несколько тем, таких как эта, в которой рекомендуется изменить Webpack и < href="https://stackoverflow.com/questions/27928372/react-router-urls-dont-work-when-refreshing-or-writting-manually">этот, который рекомендует настроить все.

Я использую 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')
);

Я попытался добавить publicPath и historyApiFallback в конфигурацию моего веб-пакета:

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.

reactjs javascript react-router-dom react-router react-router-v4
person grpcMe    schedule 18.08.2017    source источник
comment
Я попробовал ваш код здесь, и он работает для меня. Я понимаю, что это может быть проблема с вашим веб-пакетом, но просто хочу отметить, что с самим кодом все в порядке.   -  person Rowland    schedule 18.08.2017
comment
Спасибо @Rowland - я только что понял, поэтому опубликую ответ, как только смогу :)   -  person grpcMe    schedule 18.08.2017

Ответы (2)


arrow_upward
4
arrow_downward

Обычно после 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')
);

Вот пример, когда я ввел случайный URL

person grpcMe    schedule 18.08.2017

arrow_upward
0
arrow_downward

У меня была та же проблема, и я смог решить ее, изменив реализацию моего сервера, чтобы использовать экспресс с «перехватить все и отправить в 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")
person MichaelB    schedule 01.02.2018