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

deno

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.

#React Router

#Installation

#Routing

#Navigating

#URL Values

#Route Params