Router ReactJS

Neste capítulo, vamos aprender como configurar rotas para o aplicativo.

Número1Passo-instalar o React Router

um método de instalação simplesreact-routerestá emprompt de comandoexecute o seguinte trecho de código na janela.

C:\ Users \ Usuário\ Desktop \ reactApp> npm install react-router

Número2Passo-criar componentes

Neste passo, criaremos quatro componentes. OAppos componentes serão usados como menu de abas. Após a alteração da rota(Home), (Sobre)，(Contact)será renderizado outros três 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>Sobre</li>
　　　　　　　　　　　　<li>Contato</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;

Número3Passo-Adicionar roteador

Agora, adicionaremos rotas ao aplicativo. Desta vez, apresentaremos, em vez deAppApresentar elementos como no exemplo anteriorRouterTambém configuraremos componentes para cada rota.

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>
)　document.getElementById('app'))

Quando o aplicativo começar, veremos três links clicáveis, que podem ser usados para alterar as rotas.