ReactRouter三大组件：
- Router：所有路由组件的根组件（底层组件），包裹路由规则的最外层容器
- Route： 路由规则匹配组件， 显示当前规则对应的组件
- Link：路由跳转组件
- Redirect: 路由重定向
- replace: 前进后无法后退，常用于登录后
- push： 页面栈+1
- Switch：当路由中有一样的路径，就会默认只显示第一个
- switch：
import react from 'react' import { BrowserRouter as Router, Link, Route, Redirect, Switch } from 'react-router-dom' class App extends react.Component { render() { return ( <div> <Router> <Switch> <Route path="/" exact component={() => (<h1>首页</h1>) }></Route> <Route path="/form" exact component={ FormCom }></Route> <Route path="/login" exact component={() => (<h1>登录</h1>) }></Route> <Route path="/loginInfo" exact component={ LoginInfo }></Route> <Route path="/abc" exact component={() => (<h1>123</h1>)}></Route> <Route path="/abc" exact component={() => (<h1>1234</h1>)}></Route> </Switch> </Router> </div> ) } } localhost:3000/abc => 只显示123 复制代码
注意：如果要精确匹配，那么可以在route上设置exact属性
import React from 'react' import ReactDom from 'react-dom' // hash模式 // import { HashRouter as Router, Link, Route } from 'react-router-dom' // history模式 / 后端配合使用 import { BrowserRouter as Router, Link, Route } from 'react-router-dom' function Home() { return ( <div> <h1>首页</h1> </div> ) } function Product() { return ( <div> <h1>产品页面</h1> </div> ) } function Me() { return ( <div> <h1>我的</h1> </div> ) } // Router：所有路由组件的根组件（底层组件），包裹路由规则的最外层容器 // Route： 路由规则匹配组件， 显示当前规则对应的组件 // Link：路由跳转组件 class App extends React.Component { constructor(props) { super(props) this.state = {} } render() { return ( <div id="app"> <div>所有页面普通内容</div> <Router basename="/"> {/* basename 就是在路径前加一个前缀 */} <div className="nav"> <Link to="/">Home</Link> <Link to="/product">Product</Link> <Link to="/me">个人中心</Link> </div> <Route path="/" exact component={ Home }></Route> <Route path="/product" component={ Product }></Route> <Route path="/me" component={ Me }></Route> </Router> </div> ) } } ReactDom.render(<App />, document.getElementById('root')) 复制代码
link组件可以设置to属性来进行页面的跳转， to属性可以直接写路径给字符串， 也可以通过一个对象， 进行路径的设置
如：
import React from 'react' import ReactDom from 'react-dom' // hash模式 // import { HashRouter as Router, Link, Route } from 'react-router-dom' // history模式 / 后端配合使用 import { BrowserRouter as Router, Link, Route } from 'react-router-dom' function Home() { return ( <div> <h1>首页</h1> </div> ) } function Product() { return ( <div> <h1>产品页面</h1> </div> ) } function Me(props) { console.log(props) return ( <div> <h1>我的</h1> </div> ) } // Router：所有路由组件的根组件（底层组件），包裹路由规则的最外层容器 // Route： 路由规则匹配组件， 显示当前规则对应的组件 // Link：路由跳转组件 class App extends React.Component { constructor(props) { super(props) this.state = {} } render() { const meObj = { pathname: "/me", // 跳转的路径 search: '?username=admin', // get请求数据 hash: '#abc', // 设置的hash值 state: { msg: 'hello world' } // 传入组件的数据 } // 路径拼接 return ( <div id="app"> <div>所有页面普通内容</div> <Router basename="/"> {/* basename 就是在路径前加一个前缀 */} <div className="nav"> <Link to="/">Home</Link> <Link to="/product">Product</Link> <Link to={ meObj }>个人中心</Link> {/* replace 删除页面栈，无法后退 */} <Link to={ meObj } replace>个人中心</Link> </div> <Route path="/" exact component={ Home }></Route> <Route path="/product" component={ Product }></Route> <Route path="/me" component={ Me }></Route> </Router> </div> ) } } ReactDom.render(<App />, document.getElementById('root')) 复制代码
link的replace属性：点击链接后， 将新地址替换成历史访问记录的原地址
动态路由实现
网络异常，图片无法展示
|
网络异常，图片无法展示
|
网络异常，图片无法展示
|
重定向组件： 如果访问某个组件时， 如果有重定向组件， 那么就会修改页面路径，使得页面显示为所定向路径的内容
import React from 'react' import { BrowserRouter as Router, Route, Link, Redirect } from 'react-router-dom' function LoginInfo(props) { console.log(props) if(props.location.state.loginState === 'success') return <Redirect to="/admin"></Redirect> else return <Redirect to="login"></Redirect> } const FormCom = () => { const pathObj = { pathname: '/loginInfo', state: { loginState: 'success' } } return ( <div> <h1>表单验证</h1> <Link to={ pathObj }>登录验证后页面</Link> </div> ) } class App extends React.Component { constructor(props) { super(props) this.state = {} } render() { return ( <div> <Router> <Route path="/" exact component={ () => (<h1>首页</h1>) }></Route> <Route path="/form" exact component={ FormCom }></Route> <Route path="/login" exact component={ () => (<h1>登录页</h1>) }></Route> <Route path="/loginInfo" exact component={ LoginInfo }></Route> </Router> </div> ) } } export default App
