React/practise/32.react-router/02.编程式导航-实现跳转/index.js

// 引入两个组件
import Home from "./Home";
import About from "./About";
import Login from "./Login";

import { BrowserRouter, Link, Routes, Route} from "react-router-dom"

// 进行路由配置
function App() {
  return (
    // BrowserRouter 是声明当前要用一个非 hash 模式的路由
    <BrowserRouter>
    {/* Link 是指定跳转的组件，to 用来配置路由地址 */}
    <Link to="/">首页</Link>
    <Link to="/about">关于</Link>
    {/* <Link to="/login">登录</Link> */}
    {/* Routes 是路由出口，路由对应的组件会在这里进行渲染 */}
    <Routes>
      {/* Route 是指定路径和组件的对应关系，path 代表路径，element 代表组件，两个是成对出现的，一个 path 对应一个 element */}
      <Route path="/" element={<Home/>}></Route>
      <Route path="about" element={<About/>}></Route>
      <Route path="login" element={<Login/>}></Route>
    </Routes>
    </BrowserRouter>
  );
}

export default App;