javascript - doom - redirect react router v4
React-router v4-no se puede GET*url* (7)
Estaba teniendo el mismo problema, lo que lo solucionó fue editar mi archivo package.json y bajo los scripts: {
"build": "webpack -d && copy src//index.html dist//index.html /y && webpack-dev-server --content-base src --inline --port 3000"
Al final de mi código de build paquete web, agregué --history-api-fallback Esto también me pareció la solución más fácil para el error Cannot GET /url
Nota: la próxima vez que compile después de agregar --history-api-fallback , verá una línea en la salida que se ve así (con lo que sea su archivo de índice):
404s retrocederá a /index.html
Comencé a usar react-router v4. Tengo un <Router> simple en mi app.js con algunos enlaces de navegación (ver código a continuación). Si navego a localhost/vocabulary , el enrutador me redirige a la página correcta. Sin embargo, cuando presiono reload (F5) después ( localhost/vocabulary ), todo el contenido desaparece y el informe del navegador Cannot GET /vocabulary . ¿Cómo es eso posible? ¿Alguien me puede dar alguna idea de cómo resolverlo (volver a cargar la página correctamente)?
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)
Estaba teniendo el mismo problema, pero me arreglé después de detener y ejecutar webpack nuevamente.
Si su aplicación está alojada en un servidor de archivos estáticos, necesita usar un en lugar de un.
import { HashRouter } from ''react-router-dom''
ReactDOM.render((
<HashRouter>
<App />
</HashRouter>
), holder)
Si usa Webpack, verifique su configuración en parte de la configuración del servidor para el atributo "contentBase". Puede establecer por este ejemplo:
devServer: {
...
contentBase: path.join(__dirname, ''../'')
...
}
Solo para complementar la respuesta de Tyler para cualquiera que todavía esté luchando con esto:
Al agregar el devServer.historyApiFallback: true a mi configuración de webpack (sin configurar publicPath ) se corrigieron los errores 404 / Cannot-GET que estaba viendo al actualizar / retroceder / avanzar, pero solo para un 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 arrojó un 404 en la actualización / etc.
Acabo de encontrar la respuesta aceptada aquí: Error inesperado del token <en el componente de enrutador de reacción y me proporcionó la última pieza faltante. Agregar el guión principal al paquete src en mi index.html ha resuelto el problema completamente.
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 . A continuación, se muestra un ejemplo de configuración de webpack que utiliza tanto de ^ y corrige el problema de actualización para mí. Si tienes curiosidad por "por qué", this 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í: solucionando el error "no se puede obtener / URL" en la actualización con React Router (o cómo funcionan los enrutadores del lado del cliente)
También tuve éxito con esto agregando ... historyApiFallback: true
devServer: {
contentBase: path.join(__dirname, "public"),
watchContentBase: true,
publicPath: "/dist/",
historyApiFallback: true
}