BrowserRouter，Routes，Link，及useNavigate

React Router 为何物乎？

React Router 乃 React 应用中导航之用也。

其助人于页间流转，而浏览器不须刷新。

欲安装 React Router：

npm install react-router-dom

一、BrowserRouter

BrowserRouter 乃路由之主裹也。

其使 UI 与浏览器 URL 相协。

例：

import {
  BrowserRouter,
  Routes,
  Route,
  Link
} from "react-router-dom";

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function App() {

  return (
    <BrowserRouter>

      <nav>
        <Link to="/">Home</Link>


        <Link to="/about">About</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />

        <Route path="/about" element={<About />} />
      </Routes>

    </BrowserRouter>
  );
}

export default App;

何故用BrowserRouter？

无BrowserRouter，路由不兴。

其能：

URL之理
导引
路途之治

二、路途与路

路途者，总群路之用也。

路由者，定何组件当载于特定URL之用。

例：

import { Routes, Route } from "react-router-dom";

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
}

export default App;

释：
路径载组件
/ 家
/about 关于

用户访/about，React现关于组件。

3. 链接

寻常，HTML所用者导航之标签。

然于React Router，吾辈用Link。

何哉？

故也页面重载。
链接更变页面，无需刷新。

例：

import { Link } from "react-router-dom";

function Navbar() {
  return (
    <div>
      <Link to="/">Home</Link>
      <br />

      <Link to="/about">About</Link>
    </div>
  );
}

export default Navbar;

输出
点击首页则至首页
点击关于则至关于页
无页面刷新之象

4.用useNavigate钩子

useNavigate此乃程序性导航之用

即导航以JavaScript代码行之

例：

登录后
表单提交后
引導用戶

例如

import { useNavigate } from "react-router-dom";

function Login() {

  const navigate = useNavigate();

  function handleLogin() {
    alert("Login Successful");

    navigate("/home");
  }

  return (
    <div>
      <button onClick={handleLogin}>
        Login
      </button>
    </div>
  );
}

export default Login;

說明

當按鈕被點擊時

彈出提示信息
用戶自動跳轉至 /home
完整示例

import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  useNavigate
} from "react-router-dom";

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function Login() {

  const navigate = useNavigate();

  function loginUser() {
    navigate("/");
  }

  return (
    <button onClick={loginUser}>
      Go Home
    </button>
  );
}

function App() {

  return (
    <BrowserRouter>

      <Link to="/">Home</Link>
      <br />

      <Link to="/about">About</Link>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/login" element={<Login />} />
      </Routes>

    </BrowserRouter>
  );
}

export default App;

React Router 之利
行止迅捷
无页再载
体验更善
道途简易
尤宜于单页应答

推薦訂閱源

DEV Community