react实战（二）

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

今天实战的内容是配置React脚手架的路由，用到了react的react-router-dom

使用的版本为：

react-router-dom v5到v6有了不小的改动： 1、v5的到了v6变为 2、的新特性变更。 3、路由跳转由原本的useHistroy()变为了useNavigate() 4、能更好的使用嵌套路由 5、新增了useRoutes代替了react-router-config

在v5版本中使用Switch配置路由：

<Switch>
    <Route exact path="/"><A/><Route>     
</Switch>

在v6版本使用Routes配置路由

<Routes>
    <Route path="/" element={<A/>} />
</Routes>

tips:Route中v5版本的component/render被v6中的element取代

v5中嵌套路由需要明确定义，且要求组件中包含许多字符串匹配逻辑。需要使用到useRouteMatch()

v6则完全不需要这些操作，并且可以直接在路由里定义，然后使用Outlet这个新API,它就类似于是vue-router中的router-view

React的路由跳转 v5使用的是useHistory

import { useHistory } from 'react-router-dom'
function pussRouter(){
    const history = useHistory()
    function handlePush(){
        history.push('/usehistory');
    }
    return <div onClick={handlePush}>跳转路由</div>
}

v6使用了useNavigate将useHistroy取代了

import { useNavigate } from 'react-router-dom'

function pushRouter(){
    const navigate = useNavigate();
    function handlePush(){
        navigate('/useNavigate')
    }
    return <div onClick={handlePush}>跳转路由</div>
    }

}

useHistory的方法也被navigate替代

history.push('/histroy')
history.replace('/history')

navigate('/navigate')
navigate('/navigate',{replace:true});

新勾子函数useRoutes替代了react-router-config

function Test(){
    let element = useRoutes(
        [{ path:'/',element:<A/>},
        {
           path: 'parent',
           element: <Parent />,
           children: [
            { path: '/child',element:<Child />}
           ]
        },
        {
         //重定向
         {path: 'redirect',redirectTo:'/'},
         //404页面
         {path: '*',element:<pageNotFound />}
        }
        ]
    )
}

实战 1、创建React脚手架 2、安装react-router-dom v6版本 3、在src中创建router文件夹，然后在router文件夹下创建index.js文件

写入以下代码：

import { lazy } from 'react';
const router = [
    {
        path: '/index',
        component: lazy(() => import('../components/Index/index')),
    },
    {
        path: '/consult',
        component: lazy(() => import('../components/Consult/consult')),
    },
    {
        path: '/404',
        component: lazy(() => import('../components/404/pageNotFound')),
    }
]
export default router

tips: 这样用到了路由懒加载 接着到App.js这个主文件中，写入以下代码：

import TabBar from './components/tarBar/tabBar';
import { Route, Routes,Navigate } from 'react-router-dom';
import './App.scss';
import React,{ Suspense } from 'react';
import router from './router/index';
const tabName = [
    {
     name:'首页',
     value: 'index'
    },
    {
     name:'咨询浏览',
     value: 'consult'
    },
    {
     name:'协会',
     value:''
    },
    {
     name:'课程安排',
     value:''
    },
    {
    name:'资料查询',
    value:''
    },
    {
    name:'联系我们',
    value:''
}]
function App() {
  return (
    <div className="App">
     <div className='content'>
     <TabBar tabName={tabName}></TabBar>
        <Routes>
          {
            router.map((item, i) => {
              return (
                <Route key={i} path={item.path} element={
                  <Suspense fallback={
                    <div>路由懒加载</div>
                  }>
                    < item.component />
                  </Suspense>
                } />
              )
            })
          }
          <Route path="/404" element={<div>Page Not Found</div>}></Route>
          <Route path="*" element={<Navigate replace to="/404"></Navigate>}></Route>
        </Routes>
        </div>
    </div>
  );
}
export default App;

最后在主入口文件index.js中

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import "antd/dist/antd.css";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

以上路由配置完成。 效果如下：