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、我们在页面查看