React Router导航组件（一）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u012987546/article/details/79915309

1.React Router导航组件简介

React Router是一组导航组件，它们与您的应用程序进行声明。无论你是想为你的web应用程序设置书签的url，还是想要一个可组合的方式来进行本地反应，无论你的反应是什么，路由器都可以做出反应——所以，你可以选择!

简单的说React Router是处理界面之间跳转的组件。( 处理 web 和 native 界面的跳转 )

官网：https://reacttraining.com/react-router/

github：https://github.com/ReactTraining/react-router

中文文档：http://reacttraining.cn/native/guides/quick-start

React Router 当前的版本：

Package	Version	Docs	Description
react-router			React Router的核心库
react-router-dom			React Router增强版, 适用web端
react-router-native			React Router增强版, 适用React Native端
react-router-redux			React Router 与 Redux 的整合
react-router-config			静态路由配置工具

说明 :

1.react-router是核心库；

2.react-router-dom可以理解为是react-router的增强版，在开发web端的时候可以直接选择react-router-dom；

3.react-router-native也可以理解为是react-router的增强版，它适用于react native的开发。

2.React Router Dom的使用案例1

案例的效果：（点击底部可以切换界面：用到了Router ，Route，Link ）

1.新建一个React的项目

npm install -g create-react-app    // 安装脚手架create-react-app
create-react-app react-router-demo // 新建一个react-router-demo项目
cd react-router-demo // 进入react-router-demo项目

运行项目：

1.在项目的根目录执行：npm start

2.自动打开浏览器

2.集成React Router Dom组件

1.安装react-router-dom导航组件

npm install react-router-dom@4.2.2 -save  //进入项目的根目录执行

3.搭建简单的界面布局

1.搭建首页布局Main.js

2.编写main.css

/*背景*/
.base-content{
    max-width: 350px;
    height: 500px;
    margin: 0 auto;
    background-color: skyblue;

    display: flex;
    flex-direction: column;
    color: white;
}

/*头部*/
header{
    height: 35px;
    width: 100%;
    background-color: green;

    text-align: center;
    line-height: 35px;
}

/*内容*/
section{
    flex: 1;
}

/*尾部*/
footer{
    height: 35px;
    width: 100%;
    background: green;

    display: flex;
    flex-direction: row;
}

3.指定Main.js问应用的首页

4.执行的效果：

5.实现footer布局

对应的样式

.base-footer{
    flex: 1;
    border: 1px solid #dddddd;
    margin: 4px;
    text-align: center;

    color: white;
    text-decoration: none;
}

4.实现界面之间的切换

1.在Main.js文件中添加Router

export default class Main extends Component {
    render() {
        return (
            <Router>{/*根路由*/}
                <div className="base-content">
                    <header> header</header>
                    {/*内容区域是两个占位符，通过路由来确定显示哪个组件*/}
                    <section>
                        {/*配置exact精准路由，当用户访问：http://localhost:3001/ 该处使用Home组件*/}
                        <Route exact path="/" component={Home}/>
                        {/*配置路由，当用户访问：http://localhost:3001/about 该处使用About组件*/}
                        <Route path="/about" component={About}/>
                    </section>
                    <footer>
                        <div className="base-footer">Home</div>
                        <div className="base-footer">About</div>
                    </footer>
                </div>
            </Router>
        );
    }
}

其中Home组件和About组件的实现：

2.使用Link来切换页面

点击底部的Home切换到Home组件；点击底部的About切换到About组件

除了可以使用Link组件来切换界面，还可以使用NavLink组件来切换页面 ( NavLink 是Link的增强版，使用NavLink 时选中的item会自动添加active的class )

export default class Main extends Component {
    render() {
        return (
            <Router>{/*根路由*/}
                <div className="base-content">
                    <header> header</header>
                    <section>
                        {/*配置精准路由，当用户访问：http://localhost:3001/ 该处使用Home组件*/}
                        <Route exact path="/" component={Home}/>
                        {/*配置路由，当用户访问：http://localhost:3001/about 该处使用About组件*/}
                        <Route path="/about" component={About}/>
                    </section>
                    <footer>
                        {/*点Home切换页面*/}
                        <Link to={"/"} className="base-footer">
                            <div>Home</div>
                        </Link>
                        {/*点About切换页面*/}
                        <Link to={"/about"} className="base-footer">
                            <div>About</div>
                        </Link>
                    </footer>
                </div>
            </Router>
        );
    }
}