react-router6.0的简单使用
React 简单 使用
2023-09-11 14:19:18 时间
下载
npm install react-router-dom@6
例子
官网,我们按照官网的create-react-app来进行搭建
入口文件main.js
import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from "react-router-dom";
import App from "./App.jsx";
const root = ReactDOM.createRoot(
document.getElementById("root")
);
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
应用文件App.jsx
import { Routes, Route, Link } from "react-router-dom";
export default function App() {
return (
<div className="App">
<h1>Welcome to React Router!</h1>
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
</Routes>
</div>
);
}
function Home() {
return (
<>
<main>
<h2>Welcome to the homepage!</h2>
<p>You can do this, I believe in you.</p>
</main>
<nav>
<Link to="/about">About</Link>
</nav>
</>
);
}
function About() {
return (
<>
<main>
<h2>Who are we?</h2>
<p>
That feels like an existential question, don't you
think?
</p>
</main>
<nav>
<Link to="/">Home</Link>
</nav>
</>
);
}
运行npm run dev
,那么我们就会看到效果
我们点击超链接,就会发现,可以跳转到另一个页面
相关文章
- React-简单通用的抛物线动画
- React系列——websocket群聊系统在react的实现
- [React Testing] Error State with React Testing Library, findBy*
- [React Testing] Test React Component Event Handlers with fireEvent from React Testing Library
- [Recompose] Merge RxJS Button Event Streams to Build a React Counter Component
- [React Intl] Render Content Based on a Number using react-intl FormattedMessage (plural)
- [React Intl] Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber
- [React] Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer
- [React] Create an Auto Resizing Virtualized List with react-virtualized
- 用 React Hooks 造轮子
- [React] Broadcaster + Operator + Listener pattern -- 20. useBroadcaster & useListener Example
- [React] Manipulate the DOM with React refs
- [React] Using react-styleguidist for Component demo
- [React Intl] Use a react-intl Higher Order Component to format messages
- [React Intl] Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber
- [React] Create a Virtualized List with Auto Sizing Cells using react-virtualized and CellMeasurer
- [React Native] Up and Running
- 简单实现ant design pro react typescript(ts) spring boot mybatis mysql前后端登录接口 解决ant design pro登录成功无法跳转的问题
- 001-前端系列-react系列
- React(二)react脚手架的搭建
- React(一)react概述、组件、事件