React路由
1. SPA
- 单页Web应用（single page web application，SPA）。
- 整个应用只有 一个完整的页面 。
- 点击页面中的链接 不会刷新 页面，只会做页面的 局部更新。
- 数据都需要通过ajax请求获取, 并在前端异步展现。
2. 路由的理解
2.1 什么是路由？
一个路由就是一个映射关系(key:value)
key为路径, value可能是 function 或 component
2.2 路由分类
-
后端路由：
理解： value是 function, 用来处理客户端提交的请求。
注册路由： router.get(path, function(req, res))
工作过程：当 node 接收到一个请求时, 根据请求路径找到匹配的路由, 调用路由中的函数来处理请求, 返回响应数据。
-
前端路由：
浏览器端路由，value是 component，用于展示页面内容。
注册路由: <Route path="/test" component={Test}>
工作过程：当浏览器的path变为 ‘/test’ 时, 当前路由组件就会变为Test组件。
2.3 react-router-dom的理解
- react的一个插件库。
- 专门用来实现一个SPA应用。
- 基于react的项目基本都会用到此库。
2.4 路由的基本使用
-
明确界面中的导航区和展示区
-
导航区 中的 a 标签改写成 Link 标签 (在原生html中，靠<a>标签跳转不同的页面；在React中靠路由链接实现组件切换)
< Link to="/路径" >xxx< /Link> -
展示区 写 Route标签进行 路径的匹配 (注册路由)
< Route path = '/路径' component={组件名称}> -
< App>最外侧包裹了一个 < BrowserRouter > 或者 < HashRouter>
<div className="list-group">
<Link className="list-group-item" to="/about">About</Link>
<Link className="list-group-item" to="/home">Home</Link>
</div>
<div className="panel-body">
{/* 注册路由，也就是写对应的关系 */}
<Route path="/about" component={About} />
<Route path="/home" component={Home} />
</div>
index.js:
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>
,document.getElementById("root"))
2.5 路由组件以及一般组件
他们之间的区别：
-
写法不一样
一般组件：< Demo>
路由组件：< Route path="/demo" component ={Demo}/>
-
存放的位置一般不同
一般组件：components
路由组件：pages
-
接收的内容【props】
一般组件：写组件标签的时候传递什么，就能收到什么
路由组件：接收到三个固定的属性【history,location,match】
三个固定属性：
history:
go: ? go(n)
goBack: ? goBack()
goForward: ? goForward()
push: ? push(path, state)
replace: ? replace(path, state)
location:
pathname: "/about"
search: ""
state: undefined
match:
params: {}
path: "/about"
url: "/about"
2.6 NavLink使用与封装
1、因为Link不能够改变标签体，因此只适合用于一些写死的标签。而如果想要有一些点击的效果，使用 NavLink。NavLink 可以实现路由链接的高亮，通过 activeClassName 指定样式名。
//NavLink在点击的时候就会去找activeClassName="money"所指定的class的值，如果不添加默认是active，这是因为Link相当于是把标签写死了，不能去改变什么。
<NavLink ctiveClassName="money" className="list-group-item" to="/about">About</NavLink>
<NavLink className="list-group-item" to="/home">Home</NavLink>
2、但是可能一个导航又很多标签，如果这样重复的写NavLink也会造成很多的重复性的代码问题。所以封装了一个MyNavLink
//一般组件 components->MyNavLink
//封装示例
export default class MyNavLink extends Component {
render() {
return (
<NavLink activeClassName="money" className="list-group-item" {...this.props}/> //通过props来传参，里面children属性是标签名
)
}
}
3、使用和调用
//原生html中，靠<a>跳转不同的页面
{/* <a className="list-group-item" href="./about.html">About</a>
<a className="list-group-item active" href="./home.html">Home</a> */}
{/* 在React中靠路由链接实现切换组件--编写路由链接 */}
<MyNavLink to="/about">About</MyNavLink>
<MyNavLink to="/home">Home</MyNavLink>