React 路由

Posted 2021-03-20 xiaobu-wu

React 路由

一 、 认识路由/配置环境

　　1. BrowserRouter和HashRouter的区别

　　　　

　　　　1）BrowserRouter as Router表示使用Router就是使用BrowserRouter

　　　　2）<Route exact path="/" component={Landing} />exact表示指定path只有在访问‘/‘的时候才展示component={Landing}里面的组件,这个属性可选择性使用　　

　　　　3） HashRouter  表示使用Router是使用HashRouter

　　　　4） BrowserRouter 和 HashRouter 都可以实现前端路由的功能，区别是前者基于rul的pathname段，后者基于hash段。

　　2. 配置环境
           1）react里面的路由使用react-router-dom

           2）安装 npm i -S react-router-dom            3）引入 在项目的App.js或者index.js中引入

二、使用HashRouter

　　　　1. 创建项目

　　　　　　　1）cmd打开命令行。

　　　　　　    2）使用create-react-app 项目名 【创建项目】。

　　　　　　　3）cd 创建的项目名进入项目目录，cnpm i react-router-dom -S  搭建路由环境。

　　　　2. 在src目录下创建index.js文件，用来获取目标元素渲染页面

　　

import React from ‘react‘;
//引入渲染DOM方法
import ReactDOM from ‘react-dom‘;
//导入App文件
import App from ‘./App‘;

//获取目标元素渲染页面
ReactDOM.render(<App></App>,document.querySelector("#root"))

　　

　　　　3. 在src目录下创建App.js入口文件

　　　　　　

//引入React
import React from ‘react‘;
//引入路由依赖
import {HashRouter,Link,Route} from ‘react-router-dom‘;
//导入首页文件(Home.js)
import Home from "./component/Home";
//导入新闻文件(News.js)
import News from "./component/News";
//导入关于我们文件(about.js)
import About from "./component/About";


//创建组件命名为App,继承React.Component组件。
class App extends React.Component{
  
  //要传到新闻的二级路由内容
  newsVal(){
    return("newsVal")
  }
  //要传到关于我们的二级路由内容
  aboutVal(){
    return("we are family!")
  }

  //渲染方法
  render(){
    return(
      // 使用HashRouter方法，注意，一个项目中只能由一个<HashRouter/>标签
      <HashRouter>
        <h1>这是根目录Father</h1>
        {/* 设置路由名称 */}
        <Link to="/home">首页</Link>  
        <Link to={`/news/fire/${this.newsVal()}`}>新闻</Link>  
        <Link to={`/about/famliy/${this.aboutVal()}`}>关于我们</Link>  
        <hr/>
        {/* 对应路由名称跳转到相应的页面 */}
        <Route path="/home" component={Home}></Route>
        <Route path="/news/:type/:id" component={News}></Route>
        <Route path="/about/:type/:id" component={About}></Route> 
      </HashRouter>
    );
  }
}

//导出App,向外暴露自己
export default App;

　　

　　4. 在src目录下新建一个component文件夹，用来放二级路由文件

　　　　

 

 　　5. 在component目录下创建Home.js首页二级路由需要的js文件

　　

import React from "react";

//创建组件
class Home extends React.Component{
    //通过构造函数，继承获取传递过来的数据
    constructor(props){
        super();
        //创建state状态赋值为继承过来的类型，需要时可以调用
        this.state={
            p:props.match.params
        }
    }
    render(){
        return (
            <React.Fragment>
                <h1>首页</h1>
                     //调用类型获取其中数据
                <p>{this.state.p.type}--{this.state.p.id}</p>
            </React.Fragment>
        );
    }
}

//向外暴露导出组件
export default Home;    

　　6. 在component目录下创建News文件，新闻二级路由需要的js文件

import React from "react";

class News extends React.Component{
    constructor(props){
        super();
        this.state={
            p:props.match.params
        }
    }
    render(){
        return (
            <React.Fragment>
                <h1>新闻</h1>
                <p>{this.state.p.type}----{this.state.p.id}</p>
            </React.Fragment>
        );
    }
}

export default News;

　　7.在component目录下创建About.js文件，关于我们 二级路由需要的js文件

import React from "react";

class About extends React.Component{
   
    render(){
        return (
            <React.Fragment>
                <h1>关于我门</h1>
            </React.Fragment>
        );
    }
}

export default About;