Skip to main content

Route

安裝 React Router​

npm install react-router-dom
OR
yarn add react-router-dom

設定Routes​

  • 在App.js中,設定路由
import { BrowserRouter,Routes,Route,Outlet } from "react-router-dom";

const Navigation = () => {
  return (
    <>
    <h1>I am the navigation bar</h1>
    <Outlet />     //其他的子路由都放在這裡
    </>
  );
}

const Home = () => {
  return <h1>The is the Home page</h1>
}

const Shop = () => {
  return <h1>The is the shop page</h1>
}

const App = () => {
  return (
    <Routes>
    <Route path='/' element={<Navigation />}>
    <Route path='' element={<Home />} />
    <Route path='/shop' element={<Shop />} />
    </Route>
    </Routes>
  );
}

export default App;
  • Link超連接,用於將圖片或文字變成超連接到另一頁
import { Outlet, Link } from "react-router-dom";

const Navigation = () => {
  return (
    <>
    <div className="navigation"> 
      <Link className='logo-container' to='/'><div>Logo</div></Link>
      <div className="nav-links-container">
        <Link className="nav-link" to='/shop' >Shop</Link>
        </div>
      </div>
    <Outlet />
    </>
  );
}

export default Navigation;