React中路由的基本使用

张加刘结发妻子张靓颖 發表於 2019-12-25 15:12:00

1、React路由介绍
　现在我们来搞一搞React中的路由吧，别问我为什么这木喜欢用搞这个字，因为它比较深奥。
    注意下面我们使用的是React-Router-DOM
    React中的路由基本使用还是满简单的，零碎的小东西有点多，所以我直接把他们揉到一起做了一个小例子，代码我都写上注释了，应该挺简单易懂的
    注意：以下所有操作均运行在搭好的React环境中
2、安装react-router-dom
    在项目命令行中，执行<code>cnpm install react-router-dom -S</code>下载到生产环境的依赖中。
    在组件中通过对象的解构方式去获取到<code>react-router-dom</code>内置组件，在     组件中，按需引入内置组件，在页面中进行使用：
3、关于组件的区别 
　HashRouter表示一个路由的根容器，将来所有的路由相关的东西，都要包裹在HashRouter里面，而且一个网站中，只需要使用一次HashRouter就好了；
    Route表示一个路由规则，在Route上，有两个比较重要的属性，path，component
    Link则表示一个路由的链接
   <img src="https://img2018.cnblogs.com/common/1899486/201912/1899486-20191225144709307-1427426292.png">
4、仿照官网来个小案例(声明式路由)
   4.1、创建一个新的Baokuo.js文件，并在index.js中导入这个路由文件
<img src="https://img2018.cnblogs.com/common/1899486/201912/1899486-20191225145015304-251292360.png">
    4.2、创建好要跳转的页面
<img src="https://img2018.cnblogs.com/common/1899486/201912/1899486-20191225145123411-1412958066.png">
     4.3、在Baokuo.js文件中粘贴官方的第一个路由案例;
<div class="cnblogs_code">
<pre> 1 import React from 'react'
 2 import Home from './penter/Home' //因为在一个文件夹下面创建的，所以要找到准确位置。
 3 import Text from './penter/Text'
 4 import Hellow from './penter/Hellow'
 5 import {BrowserRouter,HashRouter,Route,Link} from 'react-router-dom'
 6 import {Button,DatePicker,Icon} from 'antd';
 7 import 'antd/dist/antd.css'
 8
 9 class Baokuo extends React.Component{
10
11 render(){
12
13 return (
14 // 根容器
15 <HashRouter>
16 <div>
17 <h1>这是根目录</h1>
18 <hr/>
19 {/* 链接 */}
20 <Link to="/home">首页</Link>&nbsp;&nbsp;
21 <Link to="/text">新闻</Link>&nbsp;&nbsp;
22 <Link to="/hellow">关于我们</Link>
23 <hr/>
24 {/* 路由规则，Route是配置路由的规则，同时也是一个占位符 */}
25 <Route path="/home" component={Home} />
26 <hr/>
27 <Route path="/text"component={Text}></Route>
28 <hr/>
29 <Route path="/hellow" component={Hellow}></Route>
30 </div>
31 {/* <DatePicker></DatePicker><Button type="primary" icon="twitter">点击</Button> */}
32 </HashRouter>
33 );
34 }
35 }
36
37 export default Baokuo;</pre>
</div>
<div class="cnblogs_code">
<pre>1 总体的步骤分为三步:
2 配置路由的容器Router;
3 配置路由的连接LInk;
4 配置路由填充的位置以及路径和组件的映射关系;:</pre>
</div>
5、嵌套路由
   详细可见https://blog.csdn.net/xiaodi520520/article/details/93336215 讲解的比较清楚
  5.1、嵌套路由的步骤
    a.在父路由的组件中配置子路由;
    b.子路由中同样需要配置Link和Route;
6、带参数路由和获取参数；
方式:在路由的路径中通过[:参数名称]来进行传递,改参数在路由匹配的组件中通过来获取。 英文官网案例：
<img src="https://img2018.cnblogs.com/common/1899486/201912/1899486-20191225150931816-1166246182.png">
<span style="color: rgba(171, 178, 191, 1); font-family: "Source Code Pro", "DejaVu Sans Mono", "Ubuntu Mono", "Anonymous Pro", "Droid Sans Mono", Menlo, Monaco, Consolas, Inconsolata, Courier, monospace, "PingFang SC", "Microsoft YaHei", sans-serif; font-variant-ligatures: common-ligatures; white-space: pre; background-color: rgba(40, 44, 52, 1)">  
来源：https://www.cnblogs.com/haiyang-/p/12096802.html

頁: [1]

琼殿技术论坛's Archiver

React中路由的基本使用