React路由相关知识点

1.1、单页面应用

单页面得特点：只需要加载一次主页面，通过局部刷新，就可以实现跳转或者切换页面

优点：加载速度快，用户体验比较好

缺点：

• 第一次加载比传统要慢一点
• 不利seo
• 页面相对复杂
• 返回键

二. 路由的安装

1.2、安装react-router-dom

     在项目命令行中，执行: `cnpm install react-router-dom -S`

三.路由内置组件

在组件中通过对象的解构方式去获取到react-router-dom内置组件，在组件中，按需引入内置组件，在页面中进行使用：

• HashRouter表示一个路由的根容器，将来所有的路由相关的东西，都要包裹在HashRouter里面，而且一个网站中，只需要使用一次HashRouter就好了；
• Route表示一个路由规则，在Route上，有两个比较重要的属性，path，component
• Link表示一个路由的链接

import {HashRouter,Route,Link} from 'react-router-dom'

示例：

//引入模块
import React from 'react';
import { HashRouter, Route, Link } from 'react-router-dom'

import Home from './component/Home';
import News from './component/News';
import About from './component/About';

class App extends React.Component {
   
    render() {
        return (
         <HashRouter>
         <h2>这是根目录</h2>
         <hr></hr>
         <Link to='/home/aa/a.html'>主页</Link>&nbsp;&nbsp;
         <Link to='/news/hh/b.html'>新闻</Link>&nbsp;&nbsp;
         <Link to='/about/cc/c.oo'>关于</Link><br />

         <Route path="/home" component={Home}></Route>
         <Route path="/news" component={News}></Route>
         <Route path="/about" component={About}></Route>
         </HashRouter>   
        );
    }
}

export default App;

注： 在一个HashRouter中，只能有唯一的一个根元素。 在一个网站中，只需要使用唯一的一次就行了。

Route创建的标签，就是路由规则，其中path表示要匹配的路由，component表示要展示的组件。Route具有两种身份：

  1.它是一个路由匹配规则；
  2.它是一个占位符，表示将来匹配到的组件都放到这个位置

需要注意的地方

• Route 组件path地址是以/开头 ，配置component属性，是显示的组件，这个属性不可以大写
• Route组件可以单双标签使用，单标签需要/结尾，双标签不可以在中间写入别的东西
• Link to属性的地址也是/开头，Link在页面渲染的是a标签

1.1、React-router-dom路由传值（带参数路由）

通过配置路由的地址，在Link跳转时

• Route path路径后面 /:id （key）

• Link to 路径后面 /top/10 （value）

  接收传值：

• class类组件，this.props.match.params.属性名

• 函数组件：形参.match.params.属性名

示例：

render(){
        return (
            <HashRouter>
                <div>
                    <h1>这是网站的根目录</h1>
                    <hr />                   
                      //在Link内置组件中，配置to属性，进行跳转：
                    <Link to="/movie/top/10">电影</Link>&nbsp;&nbsp;
                    <hr />                     
                     // 在Route内置组件中，配置path地址：
                    <Route path="/movie/:type/:id" component={Movie} exact></Route>
                </div>
            </HashRouter>
        );
    }

类组件中通过生命周期进行接收，this.props携带路由传递过来的数据：

class Movie extends React.Component{

    constructor(props){
        super();
        this.state = {
            routeParams:props.match.params
        }
    }

    render(){
        console.log(this);
        return (
            <div>
                电影--{this.state.routeParams.type}--{this.state.routeParams.id}
            </div>
        );
    }
}

四.嵌套路由.

嵌套路由：在路由组件中，使用Link， Route，配置子路由，实现跳转，切换；

下面为一级路由，在一级路由Home为路由组件
完整示例：

//引入模块
import React from 'react';
import { HashRouter, Route, Link } from 'react-router-dom'

import Home from './component/Home';
import News from './component/News';
import About from './component/About';

class App extends React.Component {
   
    render() {
        return (
         <HashRouter>
         <h2>这是根目录</h2>
         <hr></hr>
         <Link to='/home/aa/a.html'>主页</Link>&nbsp;&nbsp;
         <Link to='/news/hh/b.html'>新闻</Link>&nbsp;&nbsp;
         <Link to='/about/cc/c.oo'>关于</Link><br />

         <Route path="/home" component={Home}></Route>
         <Route path="/news" component={News}></Route>
         <Route path="/about" component={About}></Route>
         </HashRouter>   
        );
    }
}

export default App;

import React from 'react';
import {Route, Link } from 'react-router-dom'
import Social from './News/Social';
class News extends React.Component {

    render() {
        return (
            <React.Fragment>
          <Link to="/news/social">社会</Link>
         <Route path="/news/social" component={Social}></Route>
         </React.Fragment>
        );
    }
}
export default News;

import React from 'react'

class Social extends React.Component {
  
    render() {
        return (
            <h2>社会</h2>
        );
    }
}

export default Social;

• 效果：

今天就分享到这儿，如有不同意见欢迎提出！！