Router ReactJS

在本章中，我们将学习如何为应用设置路由。

第1步-安装React路由器

一种简单的安装方法react-router是在command prompt窗口中运行以下代码段。

C:\ Users \ 用户名 \ Desktop \ reactApp> npm install react-router

第2步-创建组件

在这一步中，我们将创建四个组件。该App组件将用作选项卡菜单。路线更改后(Home), (About)，(Contact)渲染其他三个组件。

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

Когда приложение запускается, мы увидим три кликабельных ссылки, которые можно использовать для изменения маршрута.