javascript - doom - redirect react router v4

React-router v4-no se puede GET*url*

Question

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)

Answer 1

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

Answer 2

Estaba teniendo el mismo problema, pero me arreglé después de detener y ejecutar webpack nuevamente.

Answer 3

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)

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

Answer 4

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, ''../'')
    ...
}

Answer 5

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.

Answer 6

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)

Answer 7

También tuve éxito con esto agregando ... historyApiFallback: true

devServer: {
        contentBase: path.join(__dirname, "public"),
        watchContentBase: true,
        publicPath: "/dist/",
        historyApiFallback: true
    }