快速入门 react 之 react 路由

目录

安装

导入路由相关组件

路由配置

Route props（ 路由参数 ）

match

location

history

普通路由

路由传参

子路由

没有匹配（ 404 ）

---

安装

        npm i react-router-dom@5.0

        指定安装 5.0 版本

导入路由相关组件

import { HashRouter as Router, Route, NavLink } from 'react-router-dom'

 路由组件 解释：

•  HashRouter 哈希路由  as 起别名  Router 路由 
•  Route 存放路由的容器 

                path  路径

                component  组件

                render  渲染

•  NavLink 导航链接 

                to  链接地址

                exact  精确匹配

                匹配的链接会自动添加class active

除此之外还有：

•  Link 链接 

                to  链接地址

                exact  精确匹配

•  Redirect  重定向 

                to  重定向到

                from  从

•  Switch  一次只匹配一个路由 

路由配置

  所有路由相关内容都应放入 <Router> 组件内

  链接使用 ：

    <NavLink to="地址">文字</NavLink> 

  页面使用 ：

    <Route path="地址" component={组件}></Route>

Route props（ 路由参数 ）

一共有三种：

•  match 
•  location 
•  history 

  match

   匹配路由：包含了一个 <Route path> 如何匹配 URL 的信息

   match 对象包含以下属性：

•  path  配置路径 
•  url  地址 
•  isExact  精确匹配 
•  params  路由参数 

  location

   地址栏信息

•  patchname  路径地址 
•  search  查询 
•  hash  哈希值 
•  state  状态 

   <NavLink to={{
       pathname: '/details/abc',
       search: 'name=zhou',
       hash: 'good',
       state: { redirect: '/about' }
   }}>跳转abc</NavLink>

  history

   历史记录操作

•  go()  跳转历史记录
•  goBack()  返回 
•  goForward()  前进 
•  push()  添加记录并跳转 
•  replace()  替换记录并跳转替换 
•  listen()  监听 

普通路由

一个简单的例子：

import { HashRouter as Router, Route, NavLink } from 'react-router-dom'
function App() {
    return (<Router>
        <NavLink to="/" exact>首页</NavLink> |
        <NavLink to="/about">关于页面</NavLink>
        <Route path="/" component={Home} exact></Route>
        <Route path="/about" component={About}></Route>
    </Router>);
}
export default App;
function Home({ history }) {
    return (<div>
        <h1>首页内容</h1>
    </div>);
}
function About({ match, history, location }) {
    return (<div>
        <h1>关于内容</h1>
    </div>);
}

效果：

         点击切换

 路由传参

import { HashRouter as Router, Route, NavLink } from 'react-router-dom'
function App() {
    return (<Router>
        <NavLink to="/details/abc">参数abc</NavLink> |
        <NavLink to="/details/123">参数123</NavLink> |
        <Route path="/details/:id" component={Details}></Route>
    </Router>);
}
export default App;
function Details({ match, location }) {
    return (<div>
        <h1>路由传参</h1>
        <p>参数：{match.params.id}</p>
    </div>);
}

效果：

子路由

import { HashRouter as Router, Route, NavLink, Redirect, Switch } from 'react-router-dom'
function App() {
    return (
        <Router>
            <NavLink to="/admin" exact>父页面</NavLink>
            <Route path="/admin" component={Admin}></Route>
        </Router>);
}
export default App;
function Admin() {
    return <div>
        <h1>父页面</h1>
        <p><NavLink to="/admin/dash">子页面1</NavLink> |<NavLink to="/admin/orderlist">子页面2</NavLink> </p>
        <Route path="/admin/dash" component={Dash}></Route>
        <Route path="/admin/orderlist" component={OrderList}></Route>
        <Redirect from='/admin' to="/admin/dash"></Redirect>
    </div>
}
function Dash() {
    return <div>
        <h2>子页面1</h2>
    </div>
}
function OrderList() {
    return <div>
        <h2>子页面2</h2>
    </div>
}

效果：

 <Redirect from='/admin' to="/admin/dash"></Redirect> 默认打开是子页面1

没有匹配（ 404 ）

import { HashRouter as Router, Route, NavLink, Redirect, Switch } from 'react-router-dom'
function App() {
    return (
        <Router>
            <NavLink to="/" exact>首页</NavLink> |
            <NavLink to="/about">关于页面</NavLink>
            <Switch>
                <Route path="/" component={Home} exact></Route>
                <Route path="/about" component={About}></Route>
                <Route path="*" component={NoMatch}></Route>
            </Switch>
        </Router>);
}
export default App;
function Home({ history }) {
    return (<div>
        <h1>首页内容</h1>
    </div>);
}
function About() {
    return <div>
        <h1>关于内容</h1>
    </div>;
}
function NoMatch({ location }) {
    return (<div>
        <h3>404</h3>
        <p>当前地址找不到: {location.pathname}</p>
    </div>)
}

效果：

 <Switch> ··· </Switch>：

只匹配一次路由。如果匹配到了就渲染匹配路由，如果没有匹配到则渲染404

---

更多详情可查看react路由官网：React Router: Declarative Routing for React.js

本节知识先到这里，我们下节再见...