1.2.3 • Published 3 years ago
router-view-ts 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
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>
)
}
}