React路由器
更新:HHH   时间:2023-1-7


开头

我今天又学习到新知识了,给大家分享一下吧,嘿嘿,我们共同去学习,进步。
今天学习的事关于React路由的知识,较浅的来说说吧。首先来了解下路由。

1.React路由的介绍

1.1具有单页面的特点
只需要加载一次主页面,通过局部刷新,就可以实现跳转或者切换页面
1.2优缺点
优点:加载速度快,用户体验比较好
缺点:

第一次加载比传统要慢一点

不利seo

页面相对复杂

返回键

2.路由的内置组件

路由的内置组件有:HashRouterBrowserRouterRouteLink

 

HashRouter表示一个路由的根容器,将来所有的路由相关的东西,都要包裹在HashRouter里面,而且一个网站中,只需要使用一次HashRouter就好了;

Route表示一个路由规则,在Route上,有两个比较重要的属性,pathcomponent

Link表示一个路由的链接

BrowserRouterh6路由(history API

HashRouterBrowserRouter的区别;

 

BrowserRouterHashRouter都可以实现前端路由的功能,区别是前者基于urlpathname段,后者基于hash段。

 

前者:http://127.0.0.1:3000/article/num1

 

后者:http://127.0.0.1:3000/#/article/num1(不一定是这样,但#是少不了的)

刷新页面,BrowserRouter会将当前路由发送到服务器(因为是pathname),而HashRouter不会(因为是hash段)。

3.实现路由的传值

1.首先安装react-router-dom
在根目录安装即可
执行命令为:

cnpm install react-router-dom -S

也可以写为:

cnpm i react-router-dom -S  

创建一个新的路由文件夹,存放路由(在生成的src中创建component文件夹)

在创建一个Apple.js,在里面引入这三个路由
代码如下

import React from "react";

import Home from "./component/Home";

import New from "./component/New";

import About from "./component/About";//引入路由文件

import { BrowserRouter, HashRouter, Route, Link} from "react-router-dom";

class App extends React.Component {

  render() {

    return (

    //根容器  HashRouter写在根容器中,只写一次就ok

      <HashRouter>

        <div>

          <h2>这是根目录</h2>

          <hr />

          <Link to="/home">邓紫棋偶像</Link>  

          <Link to="/new">熊梓淇男神</Link>  

          <Link to="/about">袁姗姗女神</Link>//Link内置组件中,配置to属性,进行跳转:

        </div>

        //引入路由文件 进行跳转

        <Route path="/home" component={Home}></Route>//Route内置组件中,配置path规则:

        <hr />

        <Route path="/new"  component={New}></Route>

        <hr />

        <Route path="/about" component={About}></Route>

      </HashRouter>

    );

  }

}

export default Apple;//向外暴露

路由一组件代码:Home.js

import React from "react";

class Home extends React.Component{

    render(){

        return(

            <div>邓紫棋.G.E.M是我偶像,很棒很棒,实力强,唱歌好听</div>

        )

    }

}

export default Home;

路由二组件代码: New.js

import React from "react";

class New extends React.Component {

  render() {

    return <div>

        熊梓淇是我的男神,无人可比,啦啦啦

        </div>;

  }

}

export default New;

路由三组件代码:About.js

import React from "react";

class About extends React.Component{

function(){ //XM代理申请 http://www.kaifx.cn/broker/xm.html

    render(){

        return(

            <div>袁姗姗是个励志女神,马甲线好厉害</div>

        )

    }

}

export default About;

工程中生成的index.js代码:

import React from 'react';

import ReactDOM from 'react-dom';

import Apple from './Apple';

 

ReactDOM.render(<Apple /> , document.getElementById('root'));

最后执行命令 npm start


返回web开发教程...