ReactJS Router

In this chapter, we will learn how to set up routing for the application.

Step 1 - Install React Router

a simple installation methodreact-routeriscommand promptRun the following code segment in the window.

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

Step 2 - Create components

In this step, we will create four components. TheAppThe component will be used as a tab menu. After the route changes(Home), (About),(Contact)render other three components.

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'))

當應用程序啟動時，我們將看到三個可點擊鏈接，可以用来更改路由。