Bereaksi-router v4 - tidak BISA *url*

Saya mulai menggunakan bereaksi-router v4. Saya memiliki sederhana <Router> saya app.js dengan beberapa link navigasi (lihat kode di bawah ini). Jika saya arahkan ke localhost/kosakata, router mengarahkan anda ke halaman yang tepat. Namun, ketika saya tekan reload (F5) setelah itu (localhost/kosakata), semua konten menghilang dan browser laporan Tidak BISA /kosakata. Bagaimana itu mungkin? Dapatkah seseorang memberi saya petunjuk bagaimana untuk memecahkan (reload halaman dengan benar)?

App.js:

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import { Switch, Redirect } from 'react-router'
import Login from './pages/Login'
import Vocabulary from './pages/Vocabulary'

const appContainer = document.getElementById('app')

ReactDOM.render(
  <Router>
    <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/vocabulary">Vocabulary</Link></li>
        </ul>
        <Switch>
          <Route exact path="/" component={Login} />
          <Route exact path="/vocabulary" component={Vocabulary} />
        </Switch>
    </div>
  </Router>,
appContainer)
Pemrograman
routes javascript localhost reactjs react-router
4 April 2017 в 2:09
2 tayangan
Mengomentari pertanyaan (1)
Larutan

I'm asumsi anda're menggunakan Webpack. Jika demikian, menambahkan beberapa hal yang harus anda webpack config harus memecahkan masalah. Secara khusus, output.publicPath = &#39;/&#39; dan devServer.historyApiFallback = true. Berikut ini's contoh webpack config di bawah ini yang menggunakan kedua ^ dan perbaikan refresh masalah bagi saya. Jika anda're penasaran "mengapa", this akan membantu.

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './app/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js',
    publicPath: '/'
  },
  module: {
    rules: [
      { test: /\.(js)$/, use: 'babel-loader' },
      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
    ]
  },
  devServer: {
    historyApiFallback: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'app/index.html'
    })
  ]
};

Saya menulis lebih banyak tentang hal ini di sini - Memperbaiki "tidak bisa MENDAPATKAN /URL" kesalahan di refresh dengan Bereaksi Router (atau bagaimana sisi client router bekerja)

Tyler McGinnis
Jawaban edit 4 Februari 2018 в 6:44
Komentar (10)

Hanya untuk melengkapi Tyler's jawaban bagi siapa saja yang masih berjuang dengan ini:

Menambahkan devServer.historyApiFallback: true untuk saya webpack config (tanpa setting publicPath) tetap 404/Tidak-MENDAPATKAN kesalahan saya lihat di refresh/kembali/maju, tapi hanya untuk satu tingkat bersarang rute. Dengan kata lain, "/" dan "/topik" mulai bekerja baik-baik saja tapi apa-apa di luar itu (misalnya "/topik/apa") masih melemparkan 404 di refresh/dll.

Hanya menemukan jawaban yang diterima berikut ini: https://stackoverflow.com/questions/29718481/unexpected-token-error-in-react-router-component dan itu memberikan terakhir bagian yang hilang bagi saya. Menambahkan awalan / untuk bundle script src saya index.html telah memecahkan masalah ini sepenuhnya.

Community
Jawaban edit 23 Mei 2017 в 12:34
Komentar (0)

Saya sedang mengalami masalah yang sama, apa yang tetap itu bagi saya adalah editing saya paket.json file, dan di bawah script: {

"build": "webpack -d && copy src\\index.html dist\\index.html /y && webpack-dev-server --content-base src --inline --port 3000"

di akhir saya webpack membangun kode saya menambahkan --sejarah-api-mundur hal ini juga tampak seperti solusi termudah untuk Tidak BISA /url kesalahan

Catatan: pada saat anda membangun setelah menambahkan --sejarah-api-fallback anda akan melihat sebuah garis dalam output yang terlihat seperti ini (dengan apa pun yang anda file indeks):

404s akan mundur /index.html

Komentar (0)

Jika anda menggunakan Webpack periksa konfigurasi anda di bagian dari konfigurasi server untuk "contentBase" atribut. Anda dapat mengatur dengan contoh ini:

devServer: {
    ...
    contentBase: path.join(__dirname, '../')
    ...
}
Komentar (0)

Saya juga telah sukses dengan ini dengan menambahkan ... historyApiFallback: true

devServer: {
    contentBase: path.join(__dirname, "public"),
    watchContentBase: true,
    publicPath: "/dist/",
    historyApiFallback: true
}
ravibagul91
Jawaban edit 15 September 2019 в 11:55
Komentar (0)

Jika aplikasi anda di-host pada file statis server, anda perlu menggunakan bukan .

import { HashRouter } from 'react-router-dom'

ReactDOM.render((



), holder)

https://github.com/ReactTraining/react-router/blob/v4.1.1/FAQ.md#why-doesnt-my-application-render-after-refreshing

Komentar (0)

Jika anda menggunakan Express (tidak Webpack), ini bekerja untuk saya..

app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, 'path/to/your/index.html'), function(err) {
    if (err) {
      res.status(500).send(err)
    }
  })
})
Komentar (0)

Ini bekerja untuk saya hanya perlu hanya addding devServer { historyApiFallback: true } OK, tidak perlu menggunakan publicPath: &#39;/&#39;

penggunaan seperti:

devServer: { historyApiFallback: benar },

Komentar (0)