React
Réagir au routage
Recherche…
Exemple de fichier Routes.js, suivi de l'utilisation du lien du routeur dans le composant
Placez un fichier comme le suivant dans votre répertoire de niveau supérieur. Il définit les composants à rendre pour quels chemins
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> );
Maintenant, dans votre index.js de niveau supérieur qui est votre point d’entrée vers l’application, il vous suffit de rendre ce composant de routeur comme suit:
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'));
Il ne vous reste plus qu'à utiliser Link
au lieu de <a>
tags dans votre application. Utiliser Link communiquera avec React Router pour changer la route React Router vers le lien spécifié, ce qui à son tour rendra le composant correct défini dans routes.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> ); }
Réagir au routage asynchrone
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
Sous licence CC BY-SA 3.0
Non affilié à Stack Overflow