搭建一個簡單的React項目

我是使用了create-react-app來搭建的基本框架，其中的原理和vue-cli差不多的腳手架。（當然也可以自己配置項目目錄，這里我偷了一下懶）

1. npm install -g create-react-app 先裝腳手架
2. create-react-app elemApp 這樣就可以生成一個名為elemApp的react初始框架了

這上面的就不細說了，用過三大框架的應該都清楚。

1.創建目錄結構

其實這些目錄都是可以按照個人習慣來定義，但是不可缺少的一定要加上

 

2.安裝路由（創建Router/index.js）

安裝react-router-dom

npm install react-router-dom

或者有的人比較喜歡使用yarn也是一樣的

 

yarn add react-router-dom

 

3.編寫頁面（Pages/Login/index.js，Pages/Home/index.js）

 

 4.配置兩個頁面的路由

給Router下面的index.js文件中添加

import React, { Component } from 'react'
import { HashRouter, Route, Switch } from 'react-router-dom'
import Login from './../Pages/Login'
import Home from './../Pages/Home'

class Router extends Component {
  render() {
    return (
      <div>
        <HashRouter>
          <Switch>
            <Route exact path="/" component={ Home }/>
            <Route path="/login" component={ Login }/>
          </Switch>
        </HashRouter>
      </div>
    )
  }
}
export default Router

其次就是修改src目錄下的index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './Styles/reset.css';
import * as serviceWorker from './serviceWorker';
import Router from './Router'

ReactDOM.render(<Router />, document.getElementById('root'));

serviceWorker.unregister();

路由的具體可以訪問網址：https://reacttraining.com/react-router/web/guides/quick-start

5.運行項目（npm start /  yarn start）

 

 

 

 出現該頁面且無報錯就證明一個react簡單的項目就完成了。

其中有一個<Switch>是什么東西呢？

答：有<Switch>標簽，則其中的<Route>在路徑相同的情況下，只匹配第一個，這個可以避免重復匹配；
這個就相當於switch…case…這個函數，匹配到就不再進行匹配了。

有什么不正確的地方望予以指正，謝謝！