https://github.com/vipcxj/react-router-4-compat

A wrapped version of react router 4 which compatible with react router 3
https://github.com/vipcxj/react-router-4-compat

react react-router react-router-v3 react-router-v4

Last synced: 6 months ago
JSON representation

A wrapped version of react router 4 which compatible with react router 3

• Host: GitHub
• URL: https://github.com/vipcxj/react-router-4-compat
• Owner: vipcxj
• License: mit
• Created: 2018-03-22T10:25:11.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-07-09T05:13:02.000Z (over 7 years ago)
• Last Synced: 2025-03-11T13:34:04.641Z (7 months ago)
• Topics: react, react-router, react-router-v3, react-router-v4
• Language: JavaScript
• Size: 232 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-router-4-compat · ![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg) [![npm version](https://img.shields.io/npm/v/react-router-4-compat.svg?style=flat)](https://www.npmjs.com/package/react-router-4-compat)

A wrapped version compatible with version 3 for [React-Router-4](https://reacttraining.com/react-router/).

This project is based on react router 4. So you can use any react router 4 component together with this library.

## Installation

Using [npm](https://www.npmjs.com/):

    $ npm install --save react-router-4-compat

    

```jsx harmony

import { Router4Compat as Router } from 'react-router-4-compat';

const Demo = () => {

    const App = ({ children }) => (

      


        
App

        


          
About

          
Inbox

        

        {children}

      

    );

    const About = () => 
About
;

    const Inbox = ({ children }) => (

      


        
Inbox

        {children || 'Welcome to your Inbox'}

      

    );

    const Message = ({ params }) => 
Message {params.id}
;

    const routes = {

      path: '/',

      component: App,

      childRoutes: [

        {

          path: 'about',

          component: About,

        },

        {

          path: 'inbox',

          component: Inbox,

          childRoutes: [{

            path: 'messages/:id',

            component: Message,

          }],

        },

      ],

    };

    return ;

  }


```

## Progress

- Only plain route config is supported at this moment.

- static and Dynamic route config have all been supported. 

- components and getComponents are supported, but without test.

- components and getComponents are not permitted in the root route config.