react路由配置react-router-dom v6版本

一、基础配置

npm install react-router-dom -S

1. src目录下创建router文件夹;
2. router文件夹下创建index.jsx;

/router/index.jsx:

import { Routes, Route } from 'react-router-dom';
// Routes 就是v5版本的 Switch
import PageA from './PageA'; // 页面A
import PageB from './PageB'; // 页面B
​
export default function App(){
	// 启动服务 访问 '/pageA' 就是【页面A】
    return (
        <Routes>
            <Route path='/pageA' element={<PageA />} />
            <Route path='/pageB' element={<PageB />} />
        </Routes>
    )
}

页面A：(页面B)

import React from 'react';

export default function index() {
  return (
    <div>
    	<h1>PageA</h1>
    </div>
  )
}

App.jsx

• 这个页面主要是将写好的路由放进来，展示对应路由的页面，同时配置Link 跳转的按钮

import React, { useState } from 'react';
import { Link, HashRouter } from 'react-router-dom';
import RouterConfig from './src/router'

export default function App(props) {
	
	return (
	<div>
	  // 最外层包裹 HashRouter 标签，否则下面 Link标签 会报错
	  // 这里包裹里 HashRouter 标签后，router文件夹下的index.jsx里面的 HashRouter 标签就可以去掉了
	  <HashRouter>
		<div>
		    // 这里配置跳转的按钮 Link标签和 a标签作用一样，但是a标签记得加'#'
			<Link to='/pageA'>PageA页面</Link>
			<Link to='/pageB'>PageB页面</Link>
		</div>
		// 这里展示对应路由页面
		{<RouterConfig />}
	  </HashRouter>
	</div>
	);
}

二、进阶配置

完整路由配置&模块化处理

• src下创建router文件夹，router文件夹下分别创建 index.jsx & routerList.jsx；
• 通过下列配置后将router/index.jsx 引入到 App.jsx 中即可，所有的新增页面都可以通过 routerList.jsx 统一配置去实现路由；

index.jsx配置

import React from 'react';
import { HashRouter, Routes, Route, Navigate } from 'react-router-dom';
import { otherRouter, pageRouter } from './routerList';

const allRouter = [...pageRouter, ...otherRouter];

export default function index() {
  // 提前封装好的路由配置函数
  const renderRouter = (router) =>
    router.map((item, index) =>
      item.path ? (
        <Route
          key={index}
          path={item.path}
          element={item.element}
          {...(item.props = {})}
        >
          {item.children && renderRouter(item.children)}
        </Route>
      ) : (
        <Route
          key={index}
          path={item.from}
          element={<Navigate to={item.to} replace />}
        />
      )
    );

  return (
    <HashRouter>
      <Routes>{renderRouter(allRouter)}</Routes>
    </HashRouter>
  );
}

routerList.jsx配置

import Home from '../pages/Home';
import Login from '../pages/Login';
import List from '../pages/List';

const otherRouter = [
  {
    path: '/404',
    title: '未找到页面',
    element: <NotFound />
  },
  {
    from: '*',
    to: '/404'
  }
];

const pageRouter = [
  {
    path: '/',
    title: '仪表盘',
    element: <Home />
  },
  {
    path: '/dashboard',
    title: '仪表盘',
    element: <Home />
  },
  {
    path: '/login',
    title: '用户登陆',
    element: <Login />
  },
  {
    path: '/list',
    title: '列表',
    element: <List />
  }
];
export { otherRouter, pageRouter };