react-router-dom的使用

什么是路由

前端路由
- 定义：在单页面应用(SPA)中，大部分页面结构不变，只改变部分内容的使用
- 优点：用户体验好，不需要每次都从服务器全部获取，快速展现给用户，页面切换速度快，并且可以设置页面切换时的动画
- 缺点：
  - 一开始加载时耗费时间
  - 使用浏览器的前进，后退键的时候会重新发送请求，没有合理地利用缓存
  - 单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置
后端路由
- 定义：通过用户请求的url导航到具体的html页面；每跳转到不同的URL，都是重新访问服务端，然后服务端返回页面，页面也可以是服务端获取数据，然后和模板组合，返回HTML，也可以是直接返回模板HTML，然后由前端js再去请求数据，使用前端模板和数据进行组合，生成想要的HTML
- 优点：首页加载时间快
- 缺点
  - 页面切换时间慢

React中使用路由

第一步：安装包 yarn add react-router-dom
第二步：import {HashRouter, Route, Link, Switch} from 'react-router-dom'
- HashRouter 表示路由的根容器，既所有的路由都需要在中包裹 在一个网站中，HashRouter使用一次即可
- Route 表示一个路由规则，在 Route 上，有两个比较重要的属性， path component
- Link 表示一个路由的链接，就好比 vue 中的 <router-link to=""></router-link>
- Switch 表示如果匹配到了前面的路由规则，则不会继续向下匹配

// 使用 示例

// 导入路由相关的组件
import {HashRouter, route, Link} from 'react-router-dom'; 




export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  render() {
    // 当 使用 HashRouter 把 App 根组件的元素包裹起来之后，网站就已经启用路由了
    // 在一个 HashRouter 中，只能有唯一的一个根元素
    // 在一个网站中，只需要使用 唯一的一次 <HashRouter></HashRouter> 就行了
    return <HashRouter>
      <div>
        <h1>这是网站的APP根组件</h1>

        <DatePicker></DatePicker>

        <hr />
		
        <Link to="/index">网站首页</Link>&nbsp;&nbsp;
        <Link to="/book/novel/10">小说</Link>&nbsp;&nbsp;
        <Link to="/about">关于我们</Link>

        <hr />
      
        <Route path="/index" 网站component={Home}></Route>
		{/*Router 创建的标签就是一个路由的匹配规则，path属性代表指定的路由路径，component表示需要展示的组件*/}
		 {/*如果将来匹配到了一致的路由规则，则会在次标签中展示*/}

        <hr />

        
        
		{/* 如果要匹配参数，可以在 匹配规则中，使用 : 修饰符，* 表示这个位置匹配到的是参数 */}
        <Route path="/book/:category/:id" component={Book} exact></Route>
		{/* 注意：默认情况下，路由中的规则，是模糊匹配的，如果 路由可以部分匹配成功，就会展示这个路由对应的组件 */}
		{/* 如果想要进行精确匹配，可以为 Route标签添加 exact 属性，表示使用精确匹配模式 */}
        <hr />
        <Route path="/about" component={About}></Route>
      </div>
    </HashRouter>
  }
}



*/

在子组件中，可以通过 this.props.match.params.propsName 来拿到匹配到的路由参数

编程式路由

通过 this.props.history.push(‘/book/detail/‘ + this.props.match.params.id);
- 注意：如果父组件给子组件通过 props 转递了属性，若想使用编程式路由则需要为子组件传递 history
- <ChildComponent hitory={this.props.history}></ChildComponent>
往后倒退一步：this.props.history.go(-1)

react-router-dom的使用

react-router-dom的使用

什么是路由

React中使用路由

编程式路由

Tags

FRIENDS