现代的前端应用大多都是SPA(单页应用程序),也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器的压力更小,所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能,前端路由应运而生。
前端路由的功能:让用户从一个视图(页面)导航到另一个视图(页面),前端路由是一套映射规则,在React中是URL路径与组件的对应关系,使用React路由简单来说,就是配置路径和组件(配对)。
安装
这里我们安装的是5.0版本
npm i react-router-dom@5.0 -S
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import React from 'react' import ReactDom from 'react-dom' // 导入路由组件 import { BrowserRouter as Router, Route, Link } from "react-router-dom"; const App = () => ( // 使用Router组件包裹整个应用 <Router> <div> <h1>react</h1> {/* 指定路由入口 */} <Link to="/first">页面1</Link> <Link to="/second">页面2</Link> {/* 指定路由出口,path设置为Link中的to属性,component设置为要渲染的组件 */} <Route path="/first" component={First}></Route> <Route path="/second" component={Second}></Route> </div> </Router> ) class First extends React.Component { render() { return ( <div> <h2>我是页面1的标题</h2> </div> ) } } const Second = () => ( <div> <h2>我是页面2</h2> </div> ) ReactDom.render(<App />, document.getElementById('root'));
● to="/login"
to={{ pathname:"/login", search:"name=mumu&age=18", hash:"#good", state:{redirect:"xxx"} }}
path="produce/:id"
to="/produce/abc"
props.match.params.id
//在主路由添加 <div> <Route path="/admin/dash" component={Dash}></Route> <Route path="/admin/orderlist" component={OrderList}></Route> {/* 重定向 */} <Redirect path="/admin" to="/admin/dash"></Redirect> </div>