54 lines
1.1 KiB
TypeScript
54 lines
1.1 KiB
TypeScript
|
import "./assets/less/common.less";
|
||
|
|
import { Route, Routes, useNavigate } from "react-router-dom";
|
||
|
|
import User from "./view/User";
|
||
|
|
import Home from "./view/Home";
|
||
|
|
import { Guard } from "./router/Guard";
|
||
|
|
|
||
|
|
function App() {
|
||
|
|
const navigate = useNavigate();
|
||
|
|
|
||
|
|
const routerList = [
|
||
|
|
{
|
||
|
|
path: "/",
|
||
|
|
element: <Home />,
|
||
|
|
name: "首页",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
path: "user",
|
||
|
|
element: <User />,
|
||
|
|
name: "用户",
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<header>header</header>
|
||
|
|
<div>
|
||
|
|
<aside>
|
||
|
|
<ul>
|
||
|
|
{routerList.map((router) => (
|
||
|
|
<li key={router.path}>
|
||
|
|
<a onClick={() => navigate(router.path)}>{router.name}</a>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</aside>
|
||
|
|
<main>
|
||
|
|
<Routes>
|
||
|
|
{routerList.map((router) => (
|
||
|
|
<Route
|
||
|
|
key={router.path}
|
||
|
|
path={router.path}
|
||
|
|
element={<Guard>{router.element}</Guard>}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
<Route path="*" element={<span>404</span>} />
|
||
|
|
</Routes>
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default App;
|