Empecé a usar react-router v4. Tengo un <Router> simple en mi app.js con algunos enlaces de navegación (vea el código a continuación). Si navego a localhost/vocabulary , el enrutador me redirige a la página correcta. Sin embargo, cuando presiono recargar (F5) después ( localhost/vocabulary ), todo el contenido desaparece y el navegador informa Cannot GET /vocabulary . ¿Cómo es eso posible? ¿Alguien puede darme alguna pista de cómo resolver eso (recargar la página correctamente)?
Aplicación.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)Supongo que estás usando Webpack. Si es así, agregar algunas cosas a la configuración de su paquete web debería resolver el problema. Específicamente, output.publicPath = '/' y devServer.historyApiFallback = true . Aquí hay un ejemplo de configuración de paquete web a continuación que usa ambos ^ y soluciona el problema de actualización para mí. Si tienes curiosidad por saber "por qué", esto te ayudará.
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' }) ] };Escribí más sobre esto aquí: corrigiendo el error "no se puede OBTENER/URL" al actualizar con React Router (o cómo funcionan los enrutadores del lado del cliente)
Solo para complementar la respuesta de Tyler para cualquiera que todavía tenga problemas con esto:
Al agregar devServer.historyApiFallback: true a la configuración de mi paquete web (sin configurar publicPath ), se corrigieron los errores 404/Cannot-GET que estaba viendo al actualizar/retroceder/avanzar, pero solo para un único nivel de ruta anidada. En otras palabras, "/" y "/temas" comenzaron a funcionar bien, pero cualquier cosa más allá de eso (por ejemplo, "/temas/lo que sea") aún arrojaba un 404 al actualizar/etc.
Acabo de encontrar la respuesta aceptada aquí: Token inesperado <error en el componente del enrutador de reacción y me proporcionó la última pieza que faltaba. Agregar el / principal al script de paquete src en mi index.html ha resuelto el problema por completo.
Funcionó para mí, solo necesito agregar devServer { historyApiFallback: true } está bien, no es necesario usar publicPath: '/'
uso como:
devServer: { historyApiFallback: true },