React
Reaccionar enrutamiento
Buscar..
Ejemplo del archivo Routes.js, seguido del uso de Router Link en el componente
Coloque un archivo como el siguiente en su directorio de nivel superior. Define qué componentes representar para qué rutas
import React from 'react'; import { Route, IndexRoute } from 'react-router'; import New from './containers/new-post'; import Show from './containers/show'; import Index from './containers/home'; import App from './components/app'; export default( <Route path="/" component={App}> <IndexRoute component={Index} /> <Route path="posts/new" component={New} /> <Route path="posts/:id" component={Show} /> </Route> );
Ahora en su index.js de nivel superior, que es su punto de entrada a la aplicación, solo necesita renderizar este componente de Enrutador así:
import React from 'react'; import ReactDOM from 'react-dom'; import { Router, browserHistory } from 'react-router'; // import the routes component we created in routes.js import routes from './routes'; // entry point ReactDOM.render( <Router history={browserHistory} routes={routes} /> , document.getElementById('main'));
Ahora es simplemente una cuestión de usar las etiquetas Link
lugar de <a>
toda la aplicación. El uso de Link se comunicará con React Router para cambiar la ruta de React Router al enlace especificado, que a su vez generará el componente correcto tal como se define en route.js
import React from 'react'; import { Link } from 'react-router'; export default function PostButton(props) { return ( <Link to={`posts/${props.postId}`}> <div className="post-button" > {props.title} <span>{props.tags}</span> </div> </Link> ); }
Reaccionar enrutamiento asíncrono
import React from 'react';
import { Route, IndexRoute } from 'react-router';
import Index from './containers/home';
import App from './components/app';
//for single Component lazy load use this
const ContactComponent = () => {
return {
getComponent: (location, callback)=> {
require.ensure([], require => {
callback(null, require('./components/Contact')["default"]);
}, 'Contact');
}
}
};
//for multiple componnets
const groupedComponents = (pageName) => {
return {
getComponent: (location, callback)=> {
require.ensure([], require => {
switch(pageName){
case 'about' :
callback(null, require( "./components/about" )["default"]);
break ;
case 'tos' :
callback(null, require( "./components/tos" )["default"]);
break ;
}
}, "groupedComponents");
}
}
};
export default(
<Route path="/" component={App}>
<IndexRoute component={Index} />
<Route path="/contact" {...ContactComponent()} />
<Route path="/about" {...groupedComponents('about')} />
<Route path="/tos" {...groupedComponents('tos')} />
</Route>
);
Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow