搭建项目的基本与外层路由

01、配置基本页面

图片.png

• 1-1、建立这些文件夹 在这些文件夹中穿件 index.js这个文件 然后 在文件里 穿件 组件
• 1-2、 然后在views/index.js里面 对组件进行引入和暴露

import ArticleList from './article/index'
import ArticleEdit  from './article/Edit'
import Dashboard    from './dashboard'
import Login from  './login'
import Settings  from './settings'
import Notfind from './notfind'

export {
    ArticleList,
    ArticleEdit,
    Dashboard,
    Login,
    Settings,
    Notfind
}

02、需要进行路由配置

• 2-1 配置rotues/index.js 文件
  

  创建文件 图片.png
  然后在里面引入 组件

import {
    ArticleList,
    ArticleEdit,
    Dashboard,
    Login,
    Settings,
    Notfind
} from '../views

• 2-1 开始配置路由 配置两种路由，一种是只有一个一级路由的，第二种是一级路由下有多个子路由,将路由配置成数组，使用的时候遍历（仅仅对于数量较多的时候使用）

export const adminRoute = [
    { pathname: '/admin/dashboard', component: Dashboard },
    { pathname: '/admin/article', component: ArticleList ,exact: true},
    { pathname: '/admin/article/edit', component: ArticleEdit},
    { pathname: '/admin/settings', component: Settings }
]

//配置第二种路由  一级路由
export const mainRoute = [
    { pathname: '/login', component: Login },
    { pathname: '/404', component: Notfind }
]

这样路由就配置完成了，

03、 外层路由的搭建

• 3-1 首先需要一个 插件 react-router-dom 这个插件
  yarn add react-router-dom 安装---
• 3-2 需要引入我们的一级路由 和这个插件的一些模块

import {
  HashRouter as Router,
  Route, Redirect, Switch
} from 'react-router-dom'
import { mainRoute } from './router'

第一个模块 HashRouter as Router： 说的是使用的是hash模式，并且给 HashRouter起了一个名字，叫 Router 这个名字可以随便起，但是，相信你不是一个随便的人。还有一种是 BrowserRouter 这代表了 另一个路由模式 history 模式 ，hash模式和 history 模式主要的区别就是hash模式的url 上有# 另一个没有 ，但是没有那个更麻烦，因为在上线的时候，可能后爆404页面 处理方法：

图片.png
第二个模块 Redirect 是用来重定向的，
第三个模块Switch 是为了方式 Route 穿透的，只有被Switch包裹后，才不会匹配后，最终走到了最后一个Route里面

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

• 3-3 这样一级路由就搞好了

04、 内存路由的搭建

• 4-1 解决二级路由问题
  还是要先引入 二级路由 还有 react-router-dom这个插件

import {Route,Redirect,Switch} from 'react-router-dom'
import {adminRoute} from '../src/router'

export default class App extends Component {
  render() {
    return (
      <Switch>
        {
        adminRoute.map(route=>{
          return <Route key={route.pathname}  exact={route.exact}
    //这样遍历的时候，如果 exact只有是true的时候，才进行完全匹配
          path={route.pathname} component={route.component}/>
        })
        }
        <Redirect to={adminRoute[0].pathname} from='/admin' exact/>
        <Redirect to='/404'/>
      </Switch>
    )
  }
}

• 4-2 和一级路由用法很相似 ，但是又一点是 如果 匹配到/admin/article 就不会匹配 /admin/article/edit了，所有要在router/index 里面添加参数 { pathname: '/admin/article', component: ArticleList ,exact: true}, 添加了exact：true 这个参数，就只能匹配/admin/article了， exact这个参数的意思是完全匹配

05、路由懒加载

介绍：路由懒加载是防止路由组件过多，一次加载的时候，造成浏览器的卡顿，网页速度打开过慢。使用路由懒加载的好处:可以通过路由懒加载，对于路由组件按需添加，这样可以提高浏览器的大块速度，提高用户体验。

• 5-1 配置一个 Loading 组件 图片.png

• 5-2 首先需要 下载一个插件 [yarn add react-loadable] 点击一下

• 5-3 下载完了就可以使用了

//将以前的 引入注释掉
// import ArticleList from './article/index'
// import ArticleEdit  from './article/Edit'
//使用路由懒加载
// 路由懒加载 将所有组件分开  按需加载
import Loadable from  'react-loadable'
import Loading from '../components/loading'
const ArticleList = Loadable({
   loader:()=>import('./article/index'),
   loading:Loading
//如果 没有加载出来 就会跳到Loading这个组件上，直到加载出来
})
const ArticleEdit = Loadable({
   loader:()=>import('./article/edit'),
   loading:Loading
})
//正常暴露出去
export {
   ArticleList,
   ArticleEdit,
}