基本路由配置

一、配置路由

1. src\main.tsx 引入 BrowserRouter

// etc...
import { BrowserRouter as Router } from "react-router-dom";
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <Router>
    <App />
  </Router>
);

2. 创建 Login 主页面 src\pages\Login\Login.tsx

import React from "react";
import { Outlet } from "react-router-dom";

const Login = () => {
  return (
    <div>
      <p>login</p>
      <Outlet />
    </div>
  );
};

3. Home、User 子页面

• src\pages\Home\Home.tsx
• src\pages\User\User.tsx

import React from "react";
import { Outlet } from "react-router-dom";

const Home = () => {
  return (
    <div>
      <p>home</p>
    </div>
  );
};

export default Home;

4. App 中路由

import { Routes, Route, NavLink } from "react-router-dom";
import "./App.scss";

import Login from "./pages/Login/Login";
import User from "./pages/User/User";
import Home from "./pages/Home/Home";

function App() {
  return (
    <div className="App">
      <NavLink to="/login">--首页</NavLink>
      <NavLink to="/login/user">--用户</NavLink>
      <Routes>
        <Route path="/login" element={<Login />}>
          {/* index 默认展示, 可以不写 path */}
          <Route index element={<Home />} />
          <Route path="user" element={<User />} />
        </Route>
      </Routes>
    </div>
  );
}

export default App;