前端日常之react的hook+路由獨立配置

近來項目比較少，工作量不大，早就聽說reac更新了hook；開始提倡函數式寫法，vue的新版本更新也遵循這一原則，採取向下兼容的方式，同樣支持原有的class組件寫法；以上原因有兩點（個人觀點，不喜勿噴），其一是據說react官方開發者本身比較偏向函數式，其二是開發者在框架源碼中做了很多性能優化，但是由於class組件，有些優化並沒作用於開發過程。

最近開始試一波react的坑，開始慢配置項目的目錄結構，發現它的路由沒有像vue一樣作為單獨文件配置，而是以jsx方式呈現；於是我開始在github上查找關於react獨立路由文件的方法,果然我找到了 React Router Config；=》

$ npm install --save react-router-config

於是我開始對照文檔以及大神的博客構建項目，項目目錄如下：

路由文件：routes.js

import Home from '../pages/home'
import Demo from '../pages/demo'
import Test from '../pages/test'
// import App from '../App'
const routes = [
 { path:'/home',
 component:Home,
 name:"home",
 },
 { path:'/demo',
 component:Demo,
 routes:[
 {path:'/demo/test',component:Test}
 ],
 // name:"demo",
 }
]
export {routes};

根組件：app.js

需要注意的一點是這個嵌套路由就有點坑了，跟vue差不多需要在父組件中加入一個類似router-view的東西：

import React, { useState } from 'react';
import { renderRoutes } from "react-router-config";
// import {routes} from "../router/routes"
function Demo(props) {
 // 聲明一個叫 “count” 的 state 變量。
 const [state,setState] = useState(0);
 return (
 

 
l'm demo{state} 

 <button> setState(state + 1)}>
 Click me
 /<button>
 {renderRoutes(props.route.routes, { someProp: state })}
 

 );
}
export default Demo 

這樣配置完成之後就可以開始愉快編寫組件進行開發了

今日分享到此，感覺react沒有太多定製化的東西，很自由，比較能提高個人能力