日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

create-react-app新版本快速搭建一個簡易的路由頁面

作者:yunchong_zhao 更新時間: 2022-04-17 編程語言

因為create-react-app 沒有給我默認搭建路由所以只能讓我們自己去搭建了 不過 簡單的路由還是很快可以搭建好的

npm i react-router-dom --save
or 
yarn add react-router-dom --save

這里是 react-router-dom v6版本的哈
然后就是使用了
index.js

import { BrowserRouter } from 'react-router-dom'
ReactDOM.render(
  <BrowserRouter>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </BrowserRouter>,
  document.getElementById('root')
);

App.js

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

function Home() {
  return (
    <>
      <main>
        <h2>Welcome to the homepage!</h2>
        <p>You can do this, I beleive 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>
    </>
  );
}
function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/about" element={<About />}></Route>
      </Routes>
    </div>
  );
}

export default App;

在這里插入圖片描述
制作完成。至于公司用到的 基本上都會在路由上面封裝一下。

關注我 持續更新前端知識。

原文鏈接:https://yunchong.blog.csdn.net/article/details/122689727

欄目分類
最近更新