关于react.js: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 (
            <div>
                <p>我是about组件</p>
                <a href="#/">回到home</a>
            </div>
    )
        ;
    }
}

Home.js代码如下:

import React from "react";
export default class Home extends React.Component {
    render() {
        return (
            <div>
                <p>我是home</p>
                <p>我要坏加</p>
                <a href="#/about">去about</a>
            </div>
        );
    }
}

在 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 (
<HashRouter>
    <Switch>
        <Route exact path="/" component={Home}></Route>
        <Route exact path="/about" component={About}></Route>
    </Switch>
</HashRouter>)
}

export default router;

//次要的区别是:

//留神:本期的教程到了这里就完结啦,是不是很简略!让咱们一起致力走向巅峰!