1.项目文件夹添加（结构如下）
2.页面构建
安装路由 npm install react-router-dom
3.页面基本模板
router文件夹下index.js的模板
// 引入组件
import Login from "../views/login";
// 注册路由数组
const routes = [{// 首页默认是/path: "/",element: <Login></Login>,}
];
// 导出
export default routes;
views文件夹下面的页面的基本模板结构
import React from "react";
export default function login() {return <div>这是子页面</div>;
}
在app.js中
import { useRoutes } from 'react-router-dom';
import routes from './router';function App() {return (<div>{/* 注册路由 */}{useRoutes(routes)}</div>);
}export default App;
在index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { HashRouter } from 'react-router-dom'; // 导入 HashRouterconst root = ReactDOM.createRoot(document.getElementById('root'));root.render(<HashRouter><App /></HashRouter>
);
这样基本格式就好了
