monosky-react-router

Install

npm install @monosky/react-router
# or
yarn add @monosky/react-router
# or
pnpm add @monosky/react-router

Using

import {HistoryRouter, Route, useRouteMatch} from '@monosky/react-router';

function DefaultView() {
  return (<div>DefaultView</div>);
}

function ElementView() {
  return (<div>ElementView</div>);
}

function BlockView() {
  return (<div>BlockView</div>);
}

function ParamView() {
  // Get current routing matching information
  // Contains path, parameters, and query
  const match = useRouteMatch();
  
  return (
    <div>
      <div>ParamView:</div>
      <div>{match.params.param}</div>
    </div>
  );
}

export default function App() {
  return (
    <HistoryRouter>
      {/* default route */}
      <Route path="" element={(<DefaultView/>)}/>
      <Route path="elem" element={(<ElementView/>)}/>
      {/* Equivalence matching */}
      <Route path="block" element={(<BlockView/>)}/>
      {/* Any match and obtain the specified name parameter */}
      <Route path=":param" element={(<ParamView/>)}/>
      {/* Has Regular matching parameter, warpped in '()' */}
      <Route path=":param(\d+)" element={(<ParamView/>)}/>
      {/* Has enumerated parameter, warpped in '[]' */}
      {/* The enumeration value will trim off spaces, Because it is not recommended to use spaces in the path */}
      <Route path=":param[enum1,enum2]" element={(<ParamView/>)}/>
      {/* Any match, but no parameters */}
      <Route path="*" element={(<ParamView/>)}/>
      {/* Matching multi-level paths */}
      <Route path="part1/part2"/>
    </HistoryRouter>
  );
}