React_路由的使用与组件问题，以及NavLink的使用和封装-CFANZ编程社区

一、相关理解

SPA的理解
A. 单页Web应用（single page web application，SPA）。

B. 整个应用只有一个完整的页面。

C. 点击页面中的链接不会刷新页面，只会做页面的局部更新。

D. 数据都需要通过ajax请求获取, 并在前端异步展现。
路由的理解
1. 什么是路由?
  1. 一个路由就是一个映射关系(key:value)
  2. key为路径, value可能是function或component
2. 路由分类
  1. 后端路由：
    A. 理解： value是function, 用来处理客户端提交的请求。
    
    B. 注册路由： router.get(path, function(req, res))
    
    C. 工作过程：当node接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据
  2. 前端路由：
    A. 浏览器端路由，value是component，用于展示页面内容。
    
    B. 注册路由: <Route path="/test" component={Test}>
    
    C. 工作过程：当浏览器的path变为/test时, 当前路由组件就会变为Test组件
react-router-dom的理解
1. react的一个插件库。
2. 专门用来实现一个SPA应用。
3. 基于react的项目基本都会用到此库。

history对象创建的两种方法：

方法一，直接使用H5推出的history身上的API：

let history = History.createBrowserHistory() //方法一，直接使用H5推出的history身上的API

方法二，hash值（锚点）：

let history = History.createHashHistory() //方法二，hash值（锚点）

二、路由的基本使用

明确好界面中的导航区、展示区
导航区的a标签改为Link标签

<Link to="/xxxxx">Demo</Link>

展示区写Route标签进行路径的匹配

<Route path='/xxxx' component={Demo}/>

<App>的最外侧包裹了一个<BrowserRouter>或<HashRouter>

<BrowserRouter>代码及效果：

ReactDOM.render(
    <BrowserRouter>
        <App/>
    </BrowserRouter>,
    document.getElementById('root')
)

在这里插入图片描述
<HashRouter>代码及效果：

ReactDOM.render(
    <HashRouter>
        <App/>
    </HashRouter>,
    document.getElementById('root')
)

在这里插入图片描述
多了一个‘#’号

三、路由组件与一般组件

写法不同：
一般组件：<Demo/>
路由组件：<Route path="/demo" component={Demo}/>
存放位置不同：
一般组件：components
路由组件：pages
接收到的props不同：
一般组件：写组件标签时传递了什么，就能收到什么
路由组件：接收到三个固定的属性history、location、match

四、NavLink的使用及封装

用NavLink标签配合activeClassName属性进行路由属性的选择，当点击哪一个按钮进行页面跳转时，会自动给该页面添加属性。（切记自定义属性权重要提升到最高，使用“important！”）

 <NavLink activeClassName='active' className="list-group-item" to="/about">About</NavLink>
 <NavLink activeClassName='active' className="list-group-item" to="/home">Home</NavLink>

NavLink的封装：

<MyNavLink to="/about" title="About">About</MyNavLink>
<MyNavLink to="/home" title="Home">Home</MyNavLink>

对应的MyNavLink组件：

export default class MyNavLink extends Component {
   render() {
    //const {to,title} =this.props
    return (
        <NavLink activeClassName='active' className="list-group-item" {...this.props}/>
    )
  }
}