que - react router dom reactjs
Los segmentos dinámicos reaccionar-enrutador fallan cuando se accede (2)
Tengo una configuración de ruta que se ve así (que muestra solo las partes que creo que pueden ser relevantes):
var React = require(''react'');
var Router = require(''react-router'');
var { Route, DefaultRoute, NotFoundRoute } = Router;
var routes = (
<Route handler={AppHandler}>
<DefaultRoute handler={HomeHandler}/>
<Route name=''home'' path=''/home'' handler={HomeHandler}/>
<Route name=''settings'' path=''/settings/?:tab?'' handler={SettingsHandler}/>
<NotFoundRoute handler={NotFoundHandler}/>
</Route>
);
Router.run(routes, Router.HistoryLocation, function (Handler) {
React.render(<Handler/>, document.getElementById(''application''));
});
Ahora, en mi archivo de configuración de reacción, tengo lo siguiente:
var Settings = React.createClass({
mixins: [Router.State],
render: function() { ... }
});
Si host.local/settings y registro this.getParams() todo funciona bien y el archivo se renderiza mostrándome Object {tab: undefined} en la consola. Pero tan pronto como intento host.local/settings/user , donde esperaba que la consola devuelva algo como Object {tab: ''user''} -, todo falla en algún lado y solo comienza a lanzar Uncaught SyntaxError: Unexpected token < en el consola.
Reaccionar es aún joven y, por lo tanto, los errores son bastante vagos en muchas situaciones.
He seguido las especificaciones proporcionadas en la Guía de coincidencia de rutas y parece bastante estándar, por lo que solo puedo suponer que es un problema con el router de reacción en sí o ¿me falta algo?
Actualizar
tl; dr: No es un problema con reaccionar-enrutador.
Versión larga:
Aparentemente, el problema no está en ReactJS ni en React-Router. Se trata principalmente de un error en gulp-webserver (que estoy usando para desarrollar el uso de proxies para conectar proyectos separados que se ejecutan en paralelo) y desencadena un error cuando las URL se escriben directamente en el navegador en lugar de acceder a través de un enlace.
Hice una prueba y funciona bien cuando navego, pero falla al acceder directamente como se describe en este problema de github , que básicamente hace que mis pruebas funcionales de enlace profundo sean inviables, pero debería funcionar cuando esté en producción.
Actualización 2
tl; dr: tampoco es un problema con gulp-webserver.
En mi caso, se relacionó con rutas relative y absolute y no hubo ningún problema con gulp-webserver como se mencionó anteriormente. Para ser más específico, tenía que asegurarme de que el guión y las referencias de CSS fueran absolutos, de modo que no intentara encontrarlos en la ruta que estás escribiendo en la URL.
p.ej:
Tienes dos URLs: /settings y /settings/account . En ese caso, si tiene la inclusión de su script en el archivo alternativo siendo algo así como <script src="scripts/main.js"></script> , el servidor le devolverá un 404, ya que no hay ningún archivo en /settings/scripts/main.js .
Tonta de mí, pero en caso de que alguien más se enamore de eso, espero que esto ayude.
Gracias por su análisis, me ayudó a darme cuenta de que no era un problema con React Router, sino mis propios caminos.
Añadí <base href="/" /> en el <head> de mi index.html y funcionó (:
Editar para React Router 3:
Desde principios de 2016, React Router mostrará una advertencia cuando configure <base> :
Warning: Automatically setting basename using <base href> is deprecated
and will be removed in the next major release. The semantics of <base href>
are subtly different from basename. Please pass the basename explicitly in the
options to createHistory
Es mejor hacer algo como esto en su lugar:
const history = useRouterHistory(createHistory)({
basename: ''/''
});
No estoy encontrando el error que está viendo. Parece que tu código está bien, por lo que es probable que no hayas pegado.
dando la información, he desarrollado un proyecto rápido de acuerdo con su especificación y aquí está mi configuración
''use strict'';
var React = require(''react''),
Router = require(''react-router''),
AppHandler = require(''./pages/app.js''),
HomeHandler = require(''./pages/home.js''),
SettingsHandler = require(''./pages/setting.js''),
NotFoundHandler = require(''./pages/not-found.js''),
Route = Router.Route,
NotFoundRoute = Router.NotFoundRoute,
DefaultRoute = Router.DefaultRoute,
Routes;
Routes = (
/* jshint ignore:start */
<Route handler={AppHandler}>
<DefaultRoute handler={HomeHandler}/>
<Route name=''home'' path=''/home'' handler={HomeHandler}/>
<Route name=''settings'' path=''/settings/?:tab?'' handler={SettingsHandler}/>
<NotFoundRoute handler={NotFoundHandler}/>
</Route>
/* jshint ignore:end */
);
Router.run(Routes, Router.HistoryLocation, function (Handler, state) {
React.render(<Handler/>, document.body);
});
Me estoy saltando la página de inicio y no la encuentro porque esos no son el problema, aquí está mi configuración en settings.js
''use strict'';
var React = require(''react'')
Router = require(''react-router'');
var Setting = React.createClass({
mixins: [Router.State],
componentDidMount: function() {
//console.log(this.getParams());
},
render: function() {
/* jshint ignore:start */
console.log(this.getParams());
return (
<div>this is setting</div>
);
/* jshint ignore:end */
}
});
module.exports = Setting;
espero que esto ayude