Motivation

The official version update is simply a great reward for human confusing behavior. The update from 4 => 5 => 6 is basically an update for the purpose of updating, without improving the developer experience or efficiency, even in centralized routing and decentralized routing (I Never use it) Repeatedly jump on both sides. Take the update of react-router v6 as an example. I tried it briefly and found out that the previous useHistory is obsolete. The components of react-router-dom have been changed. I learned vue-router and added RouterView. The use of routing outside the react component is supported, and react-router-config is also abolished.
The routing configuration is essentially a tree structure. I don’t know why react components are bound. They used js centralized configuration like vue-router earlier => changed to use component configuration => changed to decentralized component configuration => roll Back to the centralized component configuration => Is the next step to roll back to the ts centralized configuration?

react-router official nested routing sample code has been rolled back to centralized
https://reactrouter.com/docs/en/v6/getting-started/overview#nested-routes

Introduction

Npm: https://www.npmjs.com/package/@liuli-util/react-router
中文

Encapsulating react-router is a centralized js routing configuration, the component only exposes the necessary props, and the use of routing outside the react component is supported by default.

Quick start

Note: The current lib is not compiled, your build tool must support compiling tsx (such as vite or esbuild).

Installation dependencies

pnpm rm react-router-dom react-router
pnpm i @liuli-util/react-router

Basic usage

//router.ts
import { RouteConfig, createHashHistory } from '@liuli-util/react-router'
import { HomeView } from '../views/HomeView'
import { HelloWorld } from '../views/HelloWorld'

export const routeList: RouteConfig[] = [
  { path: '/', component: HomeView },
  { path: '/hello-world', component: HelloWorld },
]

export const history = createHashHistory()

Make <ReactRouter /> as the root component and use the layout component

//main.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import { ReactRouter } from '@liuli-util/react-router'
import { history, routeList } from './constants/router'

ReactDOM.render(
  <React.StrictMode>
    <ReactRouter history={history} routes={routeList} />
  </React.StrictMode>,
  document.getElementById('root'),
)

Example

Nested routing

Generally speaking, our page will have a certain layout structure, that is, the routing content is embedded in the layout, and nested routing can be used here.

//router.ts
import { RouteConfig, createHashHistory } from '@liuli-util/react-router'
import { HomeView } from '../views/HomeView'
import { HelloWorld } from '../views/HelloWorld'

export const routeList: RouteConfig[] = [
  {
    path: '/',
    component: Layout,
    children: [
      { path: '/', component: HomeView },
      { path: '/hello-world', component: HelloWorld },
    ],
  },
]

export const history = createHashHistory()

import * as React from 'react'
import { RouterView } from '@liuli-util/react-router'

export const Layout: React.FC = () => (
  <div>
    <h2>Layout Header</h2>
    <RouterView />
  </div>
)

Example

Asynchronous routing

It is almost the same as vue-router to use, just change the component to () => import('path')

export const routeList: RouteConfig[] = [
  { path: '/', component: () => import('../views/HomeView') },
  { path: '/hello-world', component: () => import('../views/HelloWorld') },
]

Example

Use programmatic routing

import { history } from './router'

//Jump
history.push('/')
history.push({
  pathname: '/',
  query: { name: 'liuli' },
})
history.back()
//Get some information about the current route
history.location

Concluding remarks

I like the prosperity of the react ecosystem and the strong support of ide, but I hate endless updates (unconventional), dogma (functional) or chaotic communities (dozens of CSS in js solutions).