关于react.js:React路由使用

2次阅读

共计 889 个字符，预计需要花费 3 分钟才能阅读完成。

开发环境 react.js
电脑系统 windows 10 专业版
在应用 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;

// 次要的区别是:

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

正文完