概念:
一个web应用包含多个HTML页面,这个应用称为多页面应用。页面路由由服务端控制,这种路由方式称为:后端路由。
当url改变但是并没有像后台发出请求,这种页面应用称为单页面应用。路由控制方式叫做前端路由。
react实现前端路由:
1.安装包:cnpm install react-router-dom
2.配置路由:
import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Home from "./components/Home";
import Login from "./components/Login";
class App extends Component {
render() {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/login" component={Login} />
<Route path="/posts" component={Home} />
</Switch>
</Router>
);
}
}
export default App;
解析:
路由由两个标签组成:Router和Route,前者相当于路由器,后者是前者的子组件,指定一个地址的跳转。
Reacter有两个封装好的组件:<BrowserRouter/> 和<HashRouter>,一般建议用这两个组件,不建议直接用Router
import React, { Component } from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';
import DefaultLayout from './layouts/DefaultLayout/DefaultLayout';
import LoginUser from './layouts/LoginUser/LoginUser';
import home from './routes/Home/Home'
export default class RouterWrap extends Component {
render() {
return (
<div id="router">
<HashRouter>
<Switch>
<Route path="/" component={LoginUser} exact />
<Route path="/home" component={DefaultLayout} />
<Route path="/home2" component={home} />
</Switch>
</HashRouter>
</div>
)
}
}
Route路由常用属性解释:
path:适配的路径
exact:若配置则精准匹配,否则则是部分匹配。
component:若匹配则渲染该组件
switch标签:只匹配子标签中的一个,相当于java swith关键字
Link标签:
链接组件:相当于a标签
<span className="right-link">
<Link to={{ pathname: "/login", state: { from: location } }}>
登录
</Link>
</span>
to属性可以是string可以是object,若为object,则有4个属性:
{
pathname:‘/posts’,
search:'?sort=name',
hash:'#the-hash',
state:'{fromHome:true}'
}