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了

這就是簡單的路由配置及使用了，初次寫博客，有描述不太清楚的地方能夠聯繫本人。 在本篇文章中還涉及到不少細節的知識點，我將會在之後的隨筆中補上