React-Router v4 路由的基本使用

写在最前面：
本随笔是基于React-router v4，这篇文章写给那些正准备接触或将使用React-router的伙伴们参考，话不多说，我们开始吧
开始贴上react-router的官方网站地址：https://reacttraining.com/react-router/web/guides/quick-start

我们需要安装一个创建自己项目的插件，可以用下面的命令

npm install -g create-react-app

这里如果你还没有npm这个命令，请去安装nodeJs（npm 是一个包资源管理器）

-g 全局安装
--save 安装到你的项目中
-dev 安装到你的环境依赖中

当你成功安装好create-react-app后，执行以下命令将创建你的项目

creact-react-app 你的项目名字

例如

create-react-app demo_app

项目创建成功后
进入项目中

components文件夹作为组件存放的位置

然后安装react-router-dom
（注意：react-router-dom 包含了我们实现路由的各种模块）

npm install react-router-dom --save

首先我们需要在我们的项目的根目录src下index.js中配置我们的路由（将路由挂载到我们的项目中）

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router} from 'react-router-dom';

ReactDOM.render(

, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

接下来我们分别创建组件A和组件B（他们将作为我们的路由模块）

A.js

import React, { Component } from 'react'

export default class A extends Component {
render() {
return (

我是组件A

)
}
}

B.js

import React, { Component } from 'react'

export default class B extends Component {
render() {
return (

我是组件B

)
}
}

接下来配置App.js,不多说直接上代码

import React from 'react';

// 分别引入组件A和组件B
import A from './components/A'
import B from './components/B'

// 从路由中导出我们需要的模块
import {Route,NavLink,Redirect,Switch} from 'react-router-dom'

import './App.css';

function App() {
return (

{/* NavLink 用来配置点击时对应的路由 /}
组件A
组件B
{/ switch 用来渲染唯一匹配的路由 /}

{/ route用来配置路径对应的路由 /}

{/ 路由重定向redirect，当我们进来的时候将会加载默认的路由 */}

);
}

export default App;

接下来利用npm run start运行我们的项目

这样我们就看到我们的组件A了
我们点击可以切换我们的组件B了

这就是简单的路由配置及使用了，初次写博客，有描述不太清楚的地方可以联系本人。
在本篇文章中还涉及到很多细节的知识点，我将会在以后的随笔中补上

React-Router v4 路由的基本使用

猜你喜欢