RouterReactJS

En este capítulo, aprenderemos cómo configurar rutas para la aplicación.

第1步-Instalar React Router

un método de instalación simplereact-routeres enprompt de comandosEjecutar el siguiente fragmento de código en la ventana.

C:\ Users \ nombre_de_usuario \ Desktop \ reactApp> npm install react-router

第2步-Crear componentes

En este paso, crearemos cuatro componentes. LaAppLos componentes se utilizarán como menú de pestañas. Después de cambiar la ruta(Home), (About)，(Contact)Se renderizarán otros tres componentes.

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'
class App extends React.Component {
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　ul>
　　　　　　　　　　　　<li>Home</li>
　　　　　　　　　　　　<li>About</li>
　　　　　　　　　　　　<li>Contact</li>
　　　　　　　　　　　　</ul>
　　　　　　　　　　　　{this.props.children}
　　　　　　　　　</div>
　　　　　　)
　　　}
}
export default App;
class Home extends React.Component {
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>Home...</h1>
　　　　　　　　　</div>
　　　　　　)
　　　}
}
export default Home;
class About extends React.Component {
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>About...</h1>
　　　　　　　　　</div>
　　　　　　)
　　　}
}
export default About;
class Contact extends React.Component {
　　　render() {
　　　　　　return (
　　　　　　　　　<div>
　　　　　　　　　　　　<h1>Contact...</h1>
　　　　　　　　　</div>
　　　　　　)
　　　}
}
export default Contact;

第3步-添加路由器

现在，我们将路由添加到应用程序。这次将呈现，而不是App像上一个示例中那样呈现元素Router。我们还将为每个路线设置组件。

main.js

ReactDOM.render((
　　　<Router history={browserHistory}>
　　　　　　<Route path=""/" component={App}>
　　　　　　　　　<IndexRoute component={Home}>　/>
　　　　　　　　　<Route path="home" component={Home}>　/>
　　　　　　　　　<Route path="about" component={About}>　/>
　　　　　　　　　<Route path="contact" component={Contact}>　/>
　　　　　　</Route>
　　　</Router>
)

当应用程序启动时，我们将看到三个可点击链接，可以用来更改路由。