使用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')
);