oh-router

Router is an important part of front-end development. The mainstream framework has official or community provided router support, such as vue-router and react-router, but they are deeply bound to the framework. oh-router wants to decouple the core capability of routing from the framework so that a consistent API can be used across different frameworks

Feature:

• Middleware out of the box
• route match and hooks consistent with the react-router usage experience
  • route matching and hooks are based directly on react-router v6
• Support Vue and React

Install & Use

Use in React

Installation from NPM

$ npm install --save oh-router oh-router-react-keep

Below is the most basic use case that combines React：Open in StackBlitz

import { Router } from 'oh-router'
import { RouterView, Link } from 'oh-router-react-keep'
import ReactDOM from 'react-dom/client'

const router = new Router({
  routes: [
    {
      path: '/',
      element: () => (
        <div>
          <div>Home</div>
          <Link to="/about">to About</Link>
        </div>
      ),
    },
    {
      path: '/about',
      element: () => (
        <div>
          <div>About</div>
          <Link to="/">to Home</Link>
        </div>
      ),
    },
  ],
})

ReactDOM.createRoot(document.getElementById('root')!).render(
  <RouterView router={router} />
)