ReactLynx logoReactLynx logo
ReactLynx
Guide
APIs
Blog
Contribute
Guide
APIs
Blog
Contribute

React Router

React Router enables "single page routing".

Installation

Since ReactLynx only have React v17 API now, you should install react-router v6.

npm
yarn
pnpm
bun
npm install react-router@6

Routing

Routes are configured by rendering <Routes> and <Route> that couple URL segments to UI elements.

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();
}

See React Router - Routing for details.

Navigating

There are no <Link> or <NavLink> components now in ReactLynx. You may use useNavigate to navigate between routes.

import { useNavigate } from 'react-router';

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

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

URL Values

Route Params

Route params are the parsed values from a dynamic segment.

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

In this case, :city is the dynamic segment. The parsed value for that city will be available from useParams

import { useParams } from 'react-router';

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

See React Router - useParams for more details.

Location Object

React Router creates a custom location object with some useful information on it accessible with useLocation.

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

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

See React Router - useLocation for more details.

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.