React 路由的应用
- 开发环境 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;
// 次要的区别是:
// 留神: 本期的教程到了这里就完结啦, 是不是很简略! 让咱们一起致力走向巅峰!