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了

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