# monosky-react-router

**Repository Path**: public-all/monosky-react-router

## Basic Information

- **Project Name**: monosky-react-router
- **Description**: A React router library
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-04-03
- **Last Updated**: 2024-09-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# monosky-react-router

### Install

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

### Using

```jsx
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>
  );
}
```