react-router-min

react-router-min

Only 5k. A lightweight react router component and hooks for ReactJS.

Usage

npm install react-router-min

ES Module

// App.js
import { createRouter } from 'react-router-min'

const { Main } = createRouter({
    routes: [{ path: '/', Component: Home }],
    config: { type: 'history', cleanUrl: true, stripIndex: false },
})

function App() {
    return <Main />
}

UMD file

<script src="https://unpkg.com/react-router-min/lib/index.umd.js"></script>

Learn by Demos

Follow tutorial to learn how to use react-router-min

git clone https://github.com/billypc025/react-router-min.git
cd react-router-min && npm install
npm run demo

Reference

createRouter

react-router-min supports multiple router instances. Use createRouter to create a router instance, and each instance works independently.

import { createRouter } from 'react-router-min'

// create Router instance
const {
    Link, // create a Link component
    Main, // create Router Main component
    Router, // create Router component
    useRouter, // create a useRouter Hooks (Can obtain the parsed `path` and `query`)
    pushUrl, // push state url for function call
    replaceUrl, // replace state url for function call
    routerList, // generate a path list based on routes
} = createRouter({ routes, config })

Configuring Routes

routes can be Array of Record, routes is not required.

// Array type, with children
createRouter({
    routes: [
        {
            path: '/',
            Component: Root,
            children: [
                { index: true, Component: Home },
                { path: 'about', Component: About },
                {
                    path: 'auth',
                    Component: AuthLayout,
                    children: [
                        { path: 'login', Component: Login },
                        { path: 'register', Component: Register },
                    ],
                },
                {
                    path: 'concerts',
                    children: [
                        { index: true, Component: ConcertsHome },
                        { path: ':city', Component: ConcertsCity },
                        { path: 'trending', Component: ConcertsTrending },
                    ],
                },
            ],
        },
    ],
})

// Flattened Array
createRouter({
    routes: [
        { path: '/', Component: Home },
        { path: '/about', Component: About },
        { path: '/auth', Component: AuthLayout },
        { path: '/auth/login', Component: Login },
        { path: '/auth/register', Component: Register },
        { path: '/concerts/', Component: ConcertsHome },
        { path: '/concerts/city', Component: ConcertsCity },
        { path: '/concerts/trending', Component: ConcertsTrending },
    ],
})

// Record type
createRouter({
    routes: {
        '/': Home,
        '/about': About,
        '/auth': AuthLayout,
        '/auth/login': Login,
        '/auth/register': Register,
        '/concerts/': ConcertsHome,
        '/concerts/city': ConcertsCity,
        '/concerts/trending': ConcertsTrending,
    },
})

dynamic routes

• Bind path to VariableName

// URL:  https://domain.com/foo/1/article?id=xxxxx

//-- routes --
const routes = { '/foo/[category]/article': ArticleComponent }

//-- ArticleComponent.js --
function ArticleComponent({ category }) {
    console.log(category)
    //=> '1'

    return '...'
}

• path is SegmentName

// URL:  https://domain.com/foo/1/2/article?id=xxxxx

//-- routes --
const routes = { '/foo/[...tags]/article': ArticleComponent }

//-- ArticleComponent.js --
function ArticleComponent({ tags }) {
    console.log(tags)
    //=> ['1', '2']

    return '...'
}

Configuration for the router behavior

const { Main } = createRouter({
    config: { base: '', type: 'history', cleanUrl: true, stripIndex: true },
})

• config.base router base pathname. Defaults to '', useful for Micro-FE.

• config.presetQuery preset query record, forever existing, can be covered.

• config.type The type of routing to use, either 'history' or 'hash'. Defaults to 'history'

• config.cleanUrl Whether to clean the URL by removing extension name. Defaults to true.

• config.stripIndex Whether to strip "index" from the URL path. Defaults to true.

Main component

The page component must be wrapped by the Main component.

const { Main } = createRouter({ routes })

function App() {
    return (
        <Main>
            <Layout />
        </Main>
    )
}

Link component

Link component return <a/>, but prevented default event to make SPA. Usage is same as <a/>.

There are two ways to import.

• import from instance return by creatRouter (recommend)

  //-- AppRouter.js --
  import { createRouter } from 'react-router-min'
  
  const { Main, Link } = createRouter()
  export { Link, Main as default }
  

  //-- PageComponent.js --
  import { Link } from './AppRouter.js'
  
  function PageComponent() {
      return (
          <>
              <Link href='/foo'>foo</Link>
              
              {/* replace state link */}
              <Link href='/foo' type="replace">foo</Link>
  
              {/* with query */}
              <Link href='/foo?n=1'>foo</Link>
              <Link href='/foo' query={{ a:1 }}>foo</Link>
          </>
      )
  }
  

• import directly from 'react-router-min'

  import { Link } from 'react-router-min'
  
  function PageComponent() {
      return (
          <>
              <Link href='/foo'>foo</Link>
  
              {/* replace state link */}
              <Link href='/foo' type="replace">foo</Link>
  
              {/* with query  */}
              <Link href='/foo?n=1'>foo</Link>
              <Link href='/foo' query={{ a:1 }}>foo</Link>
  
              {/* need to manually pass base  */}
              <Link href='/foo' options={{ base: '/base' }}>foo</Link>
  
              {/* need to manually pass router type */}
              <Link href='/foo' options={{ type: 'hash' }}>foo</Link>
          </>
      )
  }
  

useRouter hooks

• useRouter Hooks can obtain the parsed path and query

// URL: https://domain.com/foo?a=1

function PageComponent() {
    const { path, query } = useRouter()

    console.log({ path, query })
    // => { path: '/foo', query: { a: 1 } }

    return '...'
}

• hash type router

// URL: https://domain.com/#/foo?a=1

function PageComponent() {
    const { path, query } = useRouter()

    console.log({ path, query })
    // => { path: '/foo', query: { a: 1 } }

    return '...'
}

• When the base is set, path starts from after the base.

// URL: https://domain.com/base/foo?a=1

//-- router.js --
const { Main } = createRouter({ routes, config: { base: '/base' } })

//-- PageComponent.js --
function PageComponent() {
    const { path, query } = useRouter()

    console.log({ path, query })
    // => { path: '/foo', query: { a: 1 } }

    return '...'
}

pushUrl & replaceUrl

Function to push or replace a new URL to the history stack. There are two ways to import.

• import from instance return by creatRouter (recommend)

  imported in this way will automatically apply the config preset by creatRouter

  //-- AppRouter.js --
  import { createRouter } from 'react-router-min'
  
  const { Main, pushUrl } = createRouter({
      routes: [
          { path: '/', Component: Home },
          { path: '/foo', name: 'foo', Component: PageComponent },
      ],
  })
  export { pushUrl, Main as default }
  

  //-- function call in PageComponent --
  import { pushUrl } from './AppRouter.js'
  
  pushUrl('/foo')
  
  pushUrl('/foo?a=1')
  
  pushUrl('/foo?a=1', { query: { b: 2 } })
  
  pushUrl({ path: '/foo', query: { a: 1 } })
  
  pushUrl({ name: 'foo', query: { a: 1 } }) // by name
  

  usage of replaceURL is the same as pushURL.

• import directly from 'react-router-min'

  imported in this way, need to manually pass some configurations.

  import { pushUrl } from 'react-router-min'
  
  pushUrl('/foo')
  
  pushUrl('/foo?a=1')
  
  pushUrl('/foo?a=1', { query: { b: 2 } })
  
  pushUrl({ path: '/foo', query: { a: 1 } })
  
  pushUrl({ name: 'foo', query: { a: 1 } }) // by name
  
  // need to manually pass base
  pushUrl('/foo', { base: '/base' })
  
  // need to manually pass router type
  pushUrl('/foo', { type: 'hash' })