This project is based on react and ts

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

Usage

npm i router-view-ts

router

| Property | Description | Type | Default | | ---- | ---- | ---- | ---- | | path | should be url path | string | '' | | key | optional | string | index key | | component | - | component or function | - | | strict | - | boolean | false | | exact | - | boolean | false | | routes | children routes | array | [] | | before | should be included function next | function | - | | next | should be return path or nothing | function | - |

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"   

import { FC } from "react" 

import { RouteItem } from "./index"


interface Routes {
    routes: RouteItem[]
}

const RouterView: FC<Routes> = ({ 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}></item.component>
            } else {
                return <item.component {...routerProps}></item.component>
            }
        }}></Route>
    })
}</Switch>
}  
export default RouterView

Notice

The route is dynamic Need to introduce

yarn add react-loadable

import Loadable from 'react-loadable';

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:My,
},{
    from:"/index",
    to:"/index/home"
}]
},{
path: "/detail/:di?",
component:Detail
},{
from:"/",
to:"/index"
}]


export default routes

type

export interface RouteItem{
    from?:string;
    to?:string;
    path?:string;
    component?:any;
    children?:Array<RouteItem>;
}

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 App extends Component {
render() {
    return (
    <>
        <RouterView routes={config}></RouterView>
    </>
    )
 }
}

index.js

Used for the display of view pages

import React, { Component } from 'react'
import RouterView from "../router/Routerview"
import {RouteItem} from "../router/index"
import {NavLink} from "react-router-dom"


const ListNavlink=[{
  path:"/index/home",
  title:"首页",

},{
  path:"/index/menu",
  title:"发现",

},{
  path:"/index/car",
  title:"订单",

},{
  path:"/index/my",
  title:"我的",
}]
interface Props {
        routes:RouteItem[]
}
interface State {

}

export default class Index extends Component<Props, State> {
    render() {
        return (
            <div className="CReaateIndex">
            <div className="main">
            <RouterView routes={this.props.routes}></RouterView>

            </div>
            <div className="footer">  
            {
              ListNavlink.map(item=>{
                return <NavLink to={item.path} key={item.path}>{item.   title}</NavLink>
              })
            }
            </div>
            </div>
        )
    }
}