react-router路由懒加载/路由守卫

路由懒加载

目前在网络上查到的路由懒加载实现方式基本都是通过React.lazy()方法配合Suspense的方式，可能是受vue-router的影响，我很不喜欢这种方式，不喜欢就改变。

上代码

import {createBrowserRouter} from "react-router-dom";

const router = createBrowserRouter([
    {
        path: "/",
        async lazy() {
            const {App} = await import("../App.jsx")
            return {Component: App}
        },
        children: [
            {
                path: "/news", async lazy() {
                    const {News} = await import("../pages/News.jsx")
                    return {Component: News}
                }
            },
            {
                path: "/about", async lazy() {
                    const {About} = await import("../pages/About.jsx")
                    return {Component: About}
                }
            },
        ]
    }
])

export default router

有几个注意点：

1. 组件导出方式不能使用默认导出，而使用分别导出的方式，在引入的时候用解构引入
2. 这种路由懒加载方式不能在外层套自高阶组件，我暂时想不到怎么做
3. 套高阶组件无非是想实现路由守卫的功能,下面提供另一种方式实现路由守卫的功能

路由守卫实现方式

在顶层组件中使用useEffect监听path即可，每次path都会触发副作用函数

function App(){
	const navigate = useNavigate()
	const {pathname} = useLocation()
	const logged = isLogin()

	useEffect(() => {
		if (!logged && pathname !== "/auth") {
			navigate("/auth")
		}
	}, [pathname]);

	return <h1>hello world</h1>
}
export default App

2024.4.21 更新

还是说React路由的懒加载方式，之前的方式，随着页面越来越多，上面的那种方式会导致代码行数变得很长,在查看的时候很不清晰很难受，下面是经过优化后的实现方式，就跟vue-router的路由表一样了。在外层套高阶组件我没有测试，如果你能看到这里感兴趣的化可以自己去测试一下

// src/App.tsx

const App = () => {
    return (
        <h1>About Page</h1>
    );
};
// 关键：重命名为Component导出
export { App as Component };
// 默认导出
export default App;

// src/route.ts

import { createBrowserRouter } from "react-router-dom";

const routes = [
    {
        path: "/",
        lazy: () => import("../src/App"),
    },
];

const router = createBrowserRouter(routes);

export default router;

这样看着就舒服很多了