17 React-router

效果

 点击About，切换到About组件的内容

 点击Home，就切换到Home组件的内容

 默认是渲染About组件标签

第一步，准备

①下载：npm install --save react-router-dom

　　

 　　在package.json中可以看到我们下载的依赖中有 react-router

②使用到路由组件是，在入口JS（index.js）中我们需要 需要把APP组件放在 路由组件的标签中，让 router 管理整个应用

　　

 　  这里使用 <BrowserRouter > ，我们也可以使用 <HashRouter>

第二步：拆分组件（区分路由组件和非路由组件）

　　

　　①共三个组件，APP 组件  About 组件 Home组件，其中About组件和Home组件时路由组件

　　②路由组件我们放在 components 文件夹中，非路由组件我们放在 pages 文件夹中

第三步：使用 react-router 库 实现路由组件

　　①首先路由链接 要使用 <NavLink> 标签，原来 a 标签中的 href 改为 to

　　　　

　　　　

 　　②组件标签 使用 <Router > 标签

　　　　

 　　　  

 　　　 但是界面上我们只能渲染一个组件标签，所以需要用到 <Switch> 标签，把路由组件标签放在 Switch 中，称为可切换的路由组件

　　　　

　　　③可以看到，路由组件已经实现成功了

　　　　

 　　　④app.jsx

import React, { Component } from 'react'
import {Route,NavLink,Switch} from 'react-router-dom'

import About from '../../pages/about/about'
import Home from '../../pages/home/home'

export default class App extends Component {
    render() {
        return (
            <div>
                <div className="container">
                    <div className="row">
                        <h1>React Router Demo</h1>
                    </div>
                    <hr/>
                    <div className="row">
                        <div className="col-md-2">
                            <div className="list-group">
                                <NavLink className="list-group-item" to="/about">About</NavLink>
                                <NavLink className="list-group-item" to="/home">Home</NavLink>
                            </div>
                        </div>
                        <div className="col-md-6 col-md-offset-1">
                            <Switch>
                                <Route path="/about" component={About}/>
                                <Route path="/home" component={Home}/>
                            </Switch>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

可以看到这里并没有设置默认路由，而最后的页面效果中却默认显示了About 组件？？？

设置默认路由的方式是使用 <Redirect >

总结：如何编写路由效果

①编写路由组件

②在父组件中指定：路由链接 <NavLink > 和 路由  <Route>