React路由

官网地址：
https://github.com/ReactTraining/react-router

示例文档：
https://reacttraining.com/react-router/web/example/basic

1、安装

npm install react-router react-router-dom#做web开发 只需安装这2个

2、完成路由小案列，我们要实现一个简单的tab切换页面，切换显示不同的内容(属于不同的组件)

Home组件home.js：

import React from 'react';export default  class Home extends React.Component{    render(){        return <div>            <h2>这是首页内容......</h2>            <p>首页内容</p>            <p>首页内容</p>            <p>首页内容</p>            <p>首页内容</p>        </div>    }}

About组件about.js：

import React from 'react';export default  class About extends React.Component{    render(){        return <div>            <h2>这是关于我们页面......</h2>            <p>关于我们</p>            <p>关于我们</p>            <p>关于我们</p>            <p>关于我们</p>        </div>    }}

Help组件help.js：

import React from 'react';export default  class Help extends React.Component{    render(){        return <div>            <h2>这是帮助页面......</h2>            <p>帮助页面</p>            <p>帮助页面</p>            <p>帮助页面</p>            <p>帮助页面</p>        </div>    }}

这3个组件都是整个tab的子组件，接下来我们需要完成包含这3个子组件的外层组件(也就是实现tab切换的组件)。

router-demo.js：

import React from 'react';// 引入路由import {    BrowserRouter as Router,    Route,    Link} from 'react-router-dom';//引入组件import Home from "./home";import About from "./about"import Help from  "./help"export default  class RouterDemo extends React.Component{    render(){        return <Router>            <div>                <ul>                    <li><Link to="/">Home</Link></li>                    <li><Link to="/about">About</Link></li>                    <li><Link to="/help">Help</Link></li>                </ul>                <hr/>                <Route exact path="/" component={Home}/>                <Route path="/about" component={About}/>                <Route path="/help" component={Help}/>            </div>        </Router>    }}

这个组件里，实现了react路由代码逻辑。

3、我们在页面查看