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)
I'm asumsi anda're menggunakan Webpack. Jika demikian, menambahkan beberapa hal yang harus anda webpack config harus memecahkan masalah. Secara khusus, output.publicPath = '/'
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)
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.
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
Saya juga telah sukses dengan ini dengan menambahkan ... historyApiFallback: true
devServer: {
contentBase: path.join(__dirname, "public"),
watchContentBase: true,
publicPath: "/dist/",
historyApiFallback: true
}
Jika aplikasi anda di-host pada file statis server, anda perlu menggunakan
import { HashRouter } from 'react-router-dom'
ReactDOM.render((
<HashRouter>
<App />
</HashRouter>
), holder)
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)
}
})
})