码迷,mamicode.com
首页 > 其他好文 > 详细

React 路由

时间:2019-12-24 18:28:46      阅读:82      评论:0      收藏:0      [点我收藏+]

标签:imp   javascrip   创建组   this   info   入口   项目   link   打开   

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;

  

      

React 路由

标签:imp   javascrip   创建组   this   info   入口   项目   link   打开   

原文地址:https://www.cnblogs.com/xiaobu-wu/p/12092711.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!