学习笔记
-
-
如果没有安装yarn工具的，需要先全局安装一下yarn：npm install -g yarn
-
-
导入路由的三个核心组件： Router / Route / Link
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
-
包裹整个应用，一个React应用只需要使用一次
-
两种常用的Router： HashRouter和BrowserRouter
-
HashRouter： 使用URL的哈希值实现 （localhost:3000/#/first）
-
推荐 BrowserRouter：使用H5的history API实现（localhost3000/first）
-
-
Link组件：用于指定导航链接（a标签）
-
最终Link会编译成a标签，而to属性会被编译成 a标签的href属性
-
-
Route组件：指定路由展示组件相关信息
-
path属性：路由规则，这里需要跟Link组件里面to属性的值一致
-
component属性：展示的组件
-
Route写在哪，渲染出来的组件就在哪
-
import React from "react";
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
// login组件
class Login extends React.Component {
render() {
return <p>我是登录页面</p>
}
}
// home组件
class Home extends React.Component {
render() {
return <p>我是主页页面</p>
}
}
class App extends React.Component {
render() {
return <Router>
<div>
<Link to='/login'>登录</Link>
<Link to='/home'>主页</Link>
<Route path='/login' component={Login}></Route>
<Route path='/home' component={Home}></Route>
</div>
</Router>
}
}
export default App;
1. this.props.history.psuh('/home') //跳转到 home页面
2.this.props.go(-1) // 返回一个页面
5.匹配模式
1.模糊匹配 / 是匹配所有路由的 你设置的路由 /login 同时 /路由内容也会显示
2.精确匹配
<Route exact path='/' component={Home}></Route>6.默认路由，重定向路由
import {BrowserRouter as Router, Route, Link,Redirect} from 'react-router-dom'
<Route path='/' exact render={()=> <Redirect to={"/home"} />}></Route>
