React路由使用

React路由的使用

1. 开发环境 react.js
2. 电脑系统 windows 10 专业版
3. 在使用react.js开发的过程中,我们总是会使用到路由,我们在使用 react脚手架开发的时候,是没有内置路由的,需要我们进行安装 ,方法如下:

npm install react-router-dom --save-dev //这里可以使用cnpm代替npm命令

在 src 目录下面新建两个文件,内容如下:

About.js 具体代码如下:

import React from 'react'
export default class About extends React.Component {
    render() {
        return (
            

                
我是about组件
                回到home
            
    )
        ;
    }
}

Home.js代码如下:

import React from "react";
export default class Home extends React.Component {
    render() {
        return (
            

                
我是home
                
我要坏加
                去about
            
        );
    }
}

在 src 目录下新建一个Router.js代码如下:

import React from 'react';

import Home from './Home/Home.js'
import About from './About/About'

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

function router(){
return (

    
        
        
    
)
}

export default router;

//主要的区别是:

//注意:本期的教程到了这里就结束啦,是不是很简单!让我们一起努力走向巅峰!