React路由
一、路由介绍
- 前端路由是url路径与组件的对应关系
二、使用步骤
- 1.基本使用npm add react-router-dom
- 2.导入三个核心组件: Router/Route/Link
// HashRouter\BrowserRouter两种模式,推荐BrowserRouter
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'
- 3.使用Router组件包裹整个应用
- 4.Link组件作为导航菜单
- 5.使用Route组件配置路由规则和要展示的组件(路由出口)
const First = () => <p>页面一的页面内容</p>
<Router>
<div>
<Link to="/first">页面一</Link>
<Route path="/first" component={First}></Route>
</div>
</Router>
三、执行过程
- 点击link组件,修改浏览器地址url
- React路由监听到地址栏url的改变
- React路由内部遍历所有Route组件,使用路由规则(path)与pathname进行匹配
- 当路由规则(path)能够匹配地址栏中的pathname时,就展示该Route组件的内容
四、编程式导航
- 通过js代码实现页面跳转
- history是React路由提供的,用于path表示要跳转的路径
import {BrowserRouter as Router,Route,Link} from 'react-router-dom'
class Login extends React.Component {
render() {
return (
<div>
<h1>编程式导航</h1>
<button onClick={this.handleLogin}>去首页</button>
</div>
)
handleLogin = () => {
this.props.history.push('/home')
}
}
}
const Home = (props) => (
const handleBack = () => {
props.history.go(-1)
}
return (
<div>
<h1>我是后台首页</h1>
<button onClick={}></button>
</div>
)
)
const App = () => {
<Router>
<div>
<h1>编程式导航</h1>
<Link to="/login">去登陆页面<Link>
<Route path="/login" component={Login}></Route>
<Route path="/home" component={Home}></Route>
</div>
</Router>
}
五、默认路由
<Router path="/" component={Home}></Router>
六、模糊匹配
- 默认情况下,React路由是模糊匹配模式
- 只要是pathname以path开头就会匹配成功
七、精确匹配
- 给Route组件添加exact属性,让其变为精确匹配模式
<Route exact path="/" component={Home}></Route>
六 router4
-
BrowserRouter,包裹整个应用
-
router路由对应渲染的组件,可嵌套
-
link跳转专用
-
url参数,Route组件参数可用冒号表示参数
-
Reduirect组件 跳转
-
Switch只渲染一个子Route组件
npm install react-router-dom --save
import {BrowserRouter,Route,Link,Redirect,Switch} from 'react-router-dom'
ReactDom.render(
<BrowserRouter>
<ul>
<li>
<Link to="/">
一营
</Link>
</li>
<li>
<Link to="/erying">
二营
</Link>
</li>erying
</ul>
<Switch>
<Redirect to="/"></Redirect>
<Route path="/:location" component={Text}></Route>
<Route path="/erying" component={erying}></Route>
</Switch>
</BrowserRouter>
)
class Test extends React.component{
render() {
return <h2>{this.props.match.params.location}</h2>
}
}