React 项目实战 路由和页面组件创建

1.项目创建和组件安装
创建项目 npx create-react-app myapp

#antd
npm i antd
指定安装固定antd版本： npm i antd@2.10.4 —save (在 node_modules同级目录下)

#路由
npm i react-router-dom

搭建目录结构

首先建立两个文件 一个pages 保存页面信息 一个components 存放组件信息
在pages 里面创建一个登录页面 Login.js ,在创建一个所有管理后台的页面叫做admin 。
admin 里面包括商品管理页面，取名为products ,里面还包含了列表页 LIst.js ,和编辑页面 Edit.js,这样我们就有了三个页面
List.js Edit.js Login.js
接着为了让后台管理界面看着好看，所以创建一个文件dashboard,创建一个看板页面 index.js

接着写一个简单的页面效果
这里推荐一个插件
ES7 React/Redux/GraphQL/React-Native snippets
能够快捷的创建组件 输入rfce
测试一下页面 ，在创建的js文件里添加组件
比如login.js里添加代码

import React from 'react'

function Login() {
    return (
        <div>
            <h1>这是首页</h1>
        </div>
    )
}

export default Login

其他几个js文件也添加组件进行测试
我们知道一个后台管理 分为上，左，右三块内容 ，上面一般存放logo ，左边是一个树形结构，右面是一个内容区域

如果要使用路由，需要在最外层引入路由，在Index.js文件（React 里的入口文件）

import {HashRouter as Router}  from 'react-router-dom' ;

用到了{Switch,Route}
先写两个路由 ，接着看路由效果

<Router>
    <Switch>
    <Route path = '/login' component ={Login}/>
    <Route path ='/admin/products' component ={List}/>
    </Switch>
  </Router>

而在实际开发的时候，我们一般会配置路由文件，首先在src里面创建一个新的文件夹叫做routes表示路由文件，在这里面创建一个index.js,在这个index.js 应该写什么东西呢？
这里我们要把路由分为两类 ：
1.登录或者404这类的，页面找不到，属于一类
2.我们需要验证，比如管理后台的页面，需要验证之后才能访问的 。

export const mainRoutes = [{
    path: '/login',
    component: Login
}] 
export const adminRoutes = [{
    path: '/admin/dashboard',
    component: Index,
},
{
    path: '/admin/products',
    component: List,
    exact: true,
},
{
    path: '/admin/products/edit/:id?',
    component: Edit,
}]

上面的代码中发现 '/admin/products'路径地址有重复的，就加入一个 exact: true 精准匹配属性 ，这就是一个简单的路由配置
接着配置主入口，将路由配置引入
我们还要创建一个404 页面 ，在pages文件下创建一个PageNotFound.js 来处理我们很多时候由于页面找不到

import React from 'react'

function PageNotFound() {
    return (
        <div>
            <h1>404</h1>
        </div>
    )
}

export default PageNotFound

同时在路由配置里面接着添加一个路径

export const mainRoutes = [{
    path: '/login',
    component: Login
}, {
    path: '/404',
    component: PageNotFound
}]

接着在我们的入口文件里面做一个简单的路由配置
首先Switch组件先处理的路由是我们主要的路由（也就是第一类路由）
这里利用循环我们的每一个路由

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { mainRoutes } from './routes';
import 'antd/dist/antd.css'
import {HashRouter as Router, Redirect, Route, Switch} from 'react-router-dom'
import App from './App'



ReactDOM.render(
  <Router>
    <Switch>
    <Route path = '/admin' render ={routeProps => <App {...routeProps}  />}/>
       {
         mainRoutes.map((route)=>{
           return <Route key ={route.path}  {...route}></Route>
         })
       }
       <Redirect to = '/404'/>
    </Switch>
  </Router>,
  document.getElementById('root')
);

{
         mainRoutes.map((route)=>{
           return <Route key ={route.path}  {...route}></Route>
         })
       }

这个key 属性由于循环需要写 ，{…route} 为ES6的解构赋值 ，不使用的应该这样编写
path ={route.path}
component ={route.component}
写完之后就意味着我们配置了两个页面，一个 Login.js和一个404页面
这里我们引入一个新的组件重定向
< Redirect to =’/404’> 当我们找不到页面的时候就到404页面

接着我们写管理后台的页面
当我们访问到 path= ‘/admin’ 时 ，添加一个render 属性 ，然后让我们所有的管理后台的页面，都走APP这个组件 ，再把我们的路由属性传过去 ，这就意味着，当我们访问所有的以admin组件开头的路由时，我们都用APP组件来渲染我们的页面

<Route path="/admin" render={routeProps => <App {...routeProps} />} />

打开APP.js 进行修改 APP.js是我们的主页面 ，需要用到路由 ，这里循环我们管理后台的路由，需要引入adminRoute

{adminRoutes.map(route => {
      return (
        <Route
          key={route.path}
          path={route.path}
          exact={route.exact}
          render={routeProps => {
            return <route.component {...routeProps} />;
          }}
        />
      );
    })}

在 APP组件里写入一个<h1> 看看最后的效果
输入的路径为admin时都会经过App组件

render属性能使你便捷的渲染内联组件或是嵌套组件，你可以给这个属性传入一个函数，当路由的路径匹配时调用。同时，render属性也会接受所有由route传入的所有参数
接着如果我们在admin 里面找不到时，也返回一个404
这就是管理后台的路由配置 ，如果之后需要新增路由，我们只需要在 routes文件下的index.js 里面新增一个路由就好了 ，就会在APP组件里面渲染出来