reactjs - link - react-router-native

React-router "Can''t GET/*" a excepción de la URL de la raíz

Question

Estoy dispuesto a usar React-router para mi aplicación, y estoy probando el ejemplo dado en el documento primero, que copié a continuación. Ahora, cuando voy a localhost:3000/ , veo "App" como se esperaba, pero todas las demás páginas, como localhost:3000/inbox devuelven "Cannot GET / inbox". Que me estoy perdiendo aqui ?

var About = React.createClass({
  render: function () {
    return <h2>About</h2>;
}});

var Inbox = React.createClass({
  render: function () {
    return <h2>Inbox</h2>;
}});

var App = React.createClass({
  render () {
    return (
      <div><h1>App</h1>
        <RouteHandler/>
      </div>
)}});

var routes = (
  <Route path=''/'' handler={App}>
    <Route path="about" handler={About}/>
    <Route path="inbox" handler={Inbox}/>
  </Route>
);

Answer 1

Creo que el problema es que estás haciendo una solicitud de recurso http:

GET /inbox HTTP/1.1
Host: localhost:3000

pero están utilizando solo enrutamiento del lado del cliente. ¿Tiene la intención de hacer la representación del lado del servidor también? Es posible que deba cambiar la ubicación de su enrutador para que sea HistoryLocation lugar de HashLocation (el valor predeterminado).

El prop de ubicación de Router.run le indica dónde deben coincidir las rutas. Si no está ejecutando React del lado del servidor, creo que tiene que usar Router.HashLocation (o simplemente dejarlo en blanco).

Si no, está accediendo a su componente de manera incorrecta. Intente usar http://localhost:3000/#/inbox . Puede tardar un poco en familiarizarse con React-Router, ¡pero definitivamente vale la pena!

Reactuar la documentación del router - HashLocation

Answer 2

Encontré el mismo problema, si tiene un servidor que responde a las solicitudes y un HashRouter si está usando un servidor de archivos estáticos. En lugar de usar BrowserRouter, usar HashRouter no es la solución perfecta, pero debería resolver el error "no se puede obtener" / ruta ". asegúrese de importar HashRouter desde ''react-router-dom''

render() {
    return (
        <div>
            <HashRouter>
                <Blog />
            </HashRouter>
        </div>
    );
}

fuente: https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/basic-components.md

Answer 3

La opción más simple: usar el historial de hash en su lugar. Las direcciones URL no son muy agradables y si necesita un mejor SEO, también optaría por la representación del lado del servidor.

Si está interesado en detalles sobre esto, esta respuesta fue muy útil para mí: las URL de React-router no funcionan cuando se actualizan o se escriben manualmente.

Answer 4

La solicitud se enviará al servidor, y el directorio / archivo no existe realmente, por lo que devolverá 404, por lo que debe decirle al servidor que devuelva la página de índice para todas las solicitudes, y reaccionará manejará el rooting:

Si, como yo, está hospedando su aplicación de reacción en IIS, solo agregue un archivo web.config que contenga:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpErrors errorMode="Custom" existingResponse="Replace">
        <remove statusCode="404" subStatusCode="-1" />
        <error statusCode="404" path="/" responseMode="ExecuteURL" />
    </httpErrors>
  </system.webServer>
</configuration>

Esto le dirá al servidor IIS que devuelva la página principal al cliente en lugar de un error 404.

Answer 5

Si está utilizando webpack-dev-server hay una opción llamada history-api-fallback . Si se establece en true 404, se /index.html a /index.html .

Agregue la opción a la sección devServer de la configuración de Webpack de esta manera:

devServer: {
    contentBase: ''app/ui/www'',
    devtool: ''eval'',
    hot: true,
    inline: true,
    port: 3000,
    outputPath: buildPath,
    historyApiFallback: true,
},

Enlace a documentos de Webpack: https://webpack.github.io/docs/webpack-dev-server.html