// 引入两个组件 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;