React-Router - HackMD

# React-Router ![](https://img.shields.io/badge/Created_Date-22_JUN_2022-orange) --- :::info 新手村學習 `React` 時的小小筆記若有寫錯的地方，還請留言告訴我惹，感謝大家 ::: --- [TOC] --- ## new ### create-react-app > - Node >= 14.0.0 > - npm >= 5.6 - cd folder of collection - project name - `<my-react-app>` ```sh npx create-react-app my-react-app ``` ```sh cd my-react-app ``` - check ```sh npm start ``` - VSCode ```sh code . ``` ### react-router-dom - `/` - `/about` ```sh npm install react-router-dom@6 ``` ### BrowserRouter - `entry` - `index.js` - `import` ```JS import { BrowserRouter } from "react-router-dom"; ``` - `<BrowserRouter>` ```JS <BrowserRouter> <App /> </BrowserRouter> ``` > > https://reactrouter.com/docs/en/v6/getting-started/installation#create-react-app > --- ## Pages :::warning **【更新】：`<component>` 命名規範為大寫開頭的大駝峰** - 否則會被 `ESLint` 提示蚯蚓 --- **【實際踩雷】** :::spoiler 如果不小心漏掉大寫小寫的狀況、又推上 `GitHub` 遠端倉庫．．． - 後續若是單純手動改回大寫 - `GitHub` 會跳過登錄該檔案的版控 - 變成不管做了什麼修改推出去，遠端都沒有吃到更新，hen 可怕 ::: - 在 `<src>` 開立資料夾名為 **`<components>`** - `<src> / <components>` ```sh components ``` - 頁面 ```sh PageHome.js ``` ```sh PageAbout.js ``` ```JSX <nav> <li><a href="/">Home</a></li> <li><a href="./about">About</a></li> </nav> ``` - export fn ```JSX function Home() { return ( <main> <h2>Welcome to the homepage!</h2> <p>You can do this, I believe in you.</p> </main> ); } export default Home; ``` ```JSX function About() { return ( <main> <h2>Who are we?</h2> <p>That feels like an existential question, don't you think?</p> </main> ); } export default About; ``` - import to `App.js` ```JS import Home from './components/PageHome'; import About from './components/PageAbout'; ``` --- ## Routes - `App.js` ```JS import { Routes, Route, Link } from "react-router-dom"; ``` - Routes - Route ```JSX <Routes> <Route path="/" element={<Home />} /> <Route path="about" element={<About />} /> </Routes> <hr/> ``` ```JSX <nav> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> </nav> <hr/> ``` --- ## NotFound ```JSX <Route path="*" element={<NotFound />} /> ``` > > - https://reactrouter.com/docs/en/v6/getting-started/overview#not-found-routes > --- ## Nested ```JSX <Route element={<Layout />}> </Route> ``` ```JSX <Route path="/" element={<Home />} /> <Route path="about" element={<About />} /> ``` - `<></>` ```JSX function Layout() { return ( <nav> <li> <Link to='/'>Home</Link> </li> <li> <Link to='/about'>About</Link> </li> </nav> ); } ``` ```JSX <Outlet /> ``` ```JSX function Layout() { return ( <> <nav> <li> <Link to='/'>Home</Link> </li> <li> <Link to='/about'>About</Link> </li> </nav> <Outlet /> </> ); } ``` - `/` - `/about` - `/about/contact` ```JSX <Route path="about" element={<About />}> <Route path="contact" element={<Contact />} /> </Route> ``` --- ## More - 路由表 > - https://reactrouter.com/docs/en/v6/hooks/use-routes - `useState` to different link - 動態路由 > - https://reactrouter.com/docs/en/v6/getting-started/overview#navigation - `<HashRouter>` > - https://reactrouter.com/docs/en/v6/routers/hash-router - `<MemoryRouter>` > - https://reactrouter.com/docs/en/v6/routers/memory-router --- {%hackmd RAtn1iEBRO2tCbZeA-NylQ %} ---