使用React-router6

之前还在umi架构中使用V5，游览官网已经更新到V6，相比V5 V6更加智能区别

一、安装

npm install react-router-dom --save yarn add react-router-dom

二、使用基础

1、在index.js文件中使用路由模式，目前有BrowserRouter、HashRouter ```

import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
        <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

2、路由功能 React-Router V6版本常用路由组件和hooks，其他不常用的大家可以看下官网的介绍

组件名	用途	说明
<Routers>	一组路由	代替原有<Switch>，所有子路由都用基础的Router children来表示
<Router>	基础路由	单元格
<Link>	导航组件	在实际页面中跳转使用
<Outlet/>	自适应渲染组件	根据实际路由url自动选择组件

hooks名	用途	说明
useParams	根据路径读取参数
useNavigate	返回当前路由	代替原有V5中的 useHistory
useOutlet	返回根据路由生成的element
useLocation	返回当前的location 对象
useRoutes	同Routers组件一样，只不过是在js中使用
useSearchParams	用来匹配URL中?后面的搜索参数

3、App.js

//嵌套路由是V6版本对之前版本一个较大的升级，采用嵌套路由会智能的识别
function App() {
  return (
    <Routes>
      <Route path="user" element={<Users />}>
        <Route path=":id" element={<UserDetail />} />
        <Route path="create" element={<NewUser />} />
      </Route>
    </Routes>
  );
}

4、指定index路由，

index属性解决当嵌套路由有多个子路由但本身无法确认默认渲染哪个子路由的时候，可以增加index属性来指定默认路由

	function App() {
	return (
	<Routes>
		<Route path="/" element={<Layout />}>
		<Route index element={<About />} />
		<Route path="user" element={<User />} />
		<Route path="about" element={<About />} />
		</Route>
	</Routes>
	);
}

5、通配符

/groups
/groups/admin
/users/:id
/users/:id/messages
/files/*
/files/:id/*

三、使用配置文件,useRoutes,生成路由

1、编写routes 文件

//路由配置参数

import React, { lazy } from "react";
import { RoutePath } from "@/enums/routes";
import { RouteObject,Navigate } from 'react-router-dom'
import CustomLayout from '@/layout';

//这里扩展类型，方便做其他操作
interface RouteProps extends RouteObject{   
    name?:string; //show text,and translate
    [propName:string]:React.ReactNode;
}

export const RoutesConfig:RouteProps[]=[

    {
        path:'/',
        element:<Navigate to={RoutePath.home} /> //重定向
    },
    {

        path:RoutePath.home, 
        element:<CustomLayout />
    }
    
]

2、改造app.tsx 使用useRoues

import React from 'react'
import './App.css'
import { useRoutes } from 'react-router-dom';
import { RoutesConfig } from './routes';



const App = () => {
 
  const routes=useRoutes(RoutesConfig);

  return  routes;
}

export default App

3、在入口文件中使用React-router

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import { IntlProvider } from 'react-intl';
import { Locales } from '@/locales/language';
import localesMessage from '@/locales';


const local=Locales.CHINESE;


ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
       <IntlProvider messages={localesMessage[local]} locale={local} defaultLocale={local}>
        <App />
       </IntlProvider>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);