ReactLynx logo
ReactLynx
指引
API
博客
贡献
指引
API
博客
贡献
简体中文

路由

使用 react-router

通过 React Router 来实现“单页内路由”。

安装依赖

由于 ReactLynx 目前只支持 React 17 的 API，因此需要安装 react-router v6 版本。

npm
yarn
pnpm
bun
npm install react-router@6

创建路由

通过渲染 <Routes> 和 <Route> 来配置路由，这些路由将 URL 与 ReactLynx 组件关联起来。

import { root } from '@lynx-js/react';
import { MemoryRouter, Routes, Route } from 'react-router';

import { App } from './App.jsx';
import { Home } from './Home.jsx';

root.render(
  <MemoryRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="/home" element={<Home />} />
    </Routes>
  </MemoryRouter>,
);

if (import.meta.webpackHot) {
  import.meta.webpackHot.accept();
}

更多细节请参考 React Router - Routing。

路由跳转

目前 ReactLynx 内还没有 <Link> 或者 <NavLink>，可以通过 useNavigate 来在路由间进行跳转。

import { useNavigate } from 'react-router';

export function App() {
  const nav = useNavigate();

  return (
    <view>
      <text bindtap={() => nav('/home')}>Navigate to Home</text>
    </view>
  );
}

获取 URL 内容

路由参数

路由参数是从动态片段解析出来的值。

<Route path="/concerts/:city" element={<City />} />

在上面的例子中 :city 就是一个动态片段，通过 useParams 可以获取到其中的值。

import { useParams } from 'react-router';

function City() {
  let { city } = useParams();
  let data = useFakeDataLibrary(`/api/v2/cities/${city}`);
}

更多信息请参考 React Router - useParams

Location 对象

React Router 创建了一个自定义的 location 对象，其中包含一些可以通过 useLocation 访问的有用信息。

import { useEffect } from '@lynx-js/react';
import { useLocation } from 'react-router';

function useAnalytics() {
  let location = useLocation();
  useEffect(() => {
    sendFakeAnalytics(location.pathname);
  }, [location]);
}

更多信息请参考 React Router - useLocation

除非另有说明，本项目采用知识共享署名 4.0 国际许可协议进行许可，代码示例采用 Apache License 2.0 许可协议进行许可。