react-router-views v1.2.3

This project is based on react and ts

Demo http://router-view.mvc-works.org/

Usage

npm i router-view-ts

router

Initial idea

In time travelling debugger, router is not controlled. So I suggest location bar being regarded as a view of store in order to be controlled.

import { Route, Redirect, Switch } from "react-router-dom"

function RouterView({ routes }) {
    return <Switch>
        {
            routes.map(item => {
                if (item.to) {
                    if (item.from) {
                        return <Redirect from={item.from} exact to={item.to} key={item.to}></Redirect>
                    }
                    return <Redirect to={item.to} key={item.to}></Redirect>
                }
                return <Route path={item.path} key={item.path} render={Routerprops => {
                    if (item.children) {
                        return <item.component {...Routerprops} routes={item.children} />
                    } else {
                        return <item.component {...Routerprops} />
                    }
                }}></Route>
            })
        }
    </Switch>
}
export default RouterView

Notice

The route is dynamic Need to introduce

yarn add react-loadable

import Loadable from 'react-loadable';

import inerceptor from '../hoc/inerceptor'

const Loading=()=>{
    return <h1>正在加载</h1>
}; 

//一级理由
const Index = Loadable({ loader: () => import("../views/Index"),    loading: Loading,});
const Detail = Loadable({ loader: () => import("../views/Detail")   , loading: Loading,});
//二级理由
const Home = Loadable({ loader: () => import("../views/Index/Home"), loading: Loading,});
const Menu = Loadable({ loader: () => import("../views/Index/Menu"), loading: Loading,});
const Car = Loadable({ loader: () => import("../views/Index/Car")   , loading: Loading,});
const My = Loadable({ loader: () => import("../views/Index/My"),    loading: Loading,});
const routes=[{
path: "/index",
component:Index,
children: [{
    path: "/index/home",
    component:Home,
},{
    path: "/index/menu",
    component:Menu,
},{
    path: "/index/car",
    component:Car,
},{
    path: "/index/my",
   component:inerceptor(My),
},{
    from:"/index",
    to:"/index/home"
}]
},{
path: "/detail/:di?",
component:Detail
},{
from:"/",
to:"/index"
}]


export default routes

High order component

import React from 'react'
import {Redirect} from "react-router-dom"
export default function interceptor(WrapComponent){
    return class interceptor extends React.Component {
        render() {
            const login=window.localStorage.getItem("token");
            if(!login){
                return <Redirect to="/login"></Redirect>
            }else{
              return  <WrapComponent {...this.props}></WrapComponent>
            }
        }
    }
}

App.js

router-routerview is a lightweight, extensive state based riot.js router for tag views. It was designed after the ui-router project, with all the quirks of riot.js.

This project makes use of the HTML5 history api, using pushState under the hood; in other words this is a client sided router.

import React, { Component } from 'react'
import RouterView from './router/RouterView'
import config from "./router/router.config"
export default class componentName extends Component {
render() {
    return (
    <>
        <RouterView routes={config}></RouterView>
    </>
    )
}
}

index.js

import React, { Component } from 'react'
import RouterView from '../router/RouterView'
export default class componentName extends Component {
    render() {
        return (
            <>
            <RouterView routes={this.props.routes}></RouterView> 
            </>
        )
    }
}