#This project is based on react and immutable-js.

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

##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.

    // src/router/RouterView.js
    import React, { Component } from 'react'
    import {Switch,Route,Redirect} from 'react-router-dom'

    export default class RouterView extends Component {

        render() {

            let {routes}=this.props
            let isRedic=routes.filter((item)=>item.redirect)
            let Redic=isRedic.map((item,index)=>{
                return <Redirect key={index} from={item.path} to={item.redirect}></Redirect>
            })

            routes=routes.filter((item)=>!item.redirect)
            return (

                <Switch>
                    {
                        routes.map((item,index)=>{
                            return <Route key={index} path={item.path} render={(props)=>{
                                return <item.component routes={item.children} {...props}></item.component>
                            }}></Route>
                        })
                    }
                    {
                        Redic.length!==0 && Redic
                    }
                </Switch>

            )
        }
    }

##Notice keep in mind that router-view is totally based on immutable-js. if you need to route asynchronously, try set skipRendering to true during loading undefined value is eliminated on purpose, fire an issue if you think differenly.

    //src/router/routes.js

    import login from "../view/login";
    import main from "../view/main";

    const routes=[
        {
            path:'/',
            redirect:"/login"
        },
        {
            path:"/login",
            component:login
        },
        {
            path:"/main",
            component:main
        }   
    ]

    export default routes;

##About

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.

    // src/App.js
    return (
      <BrowserRouter>
          <RouterView routes={routes}></RouterView>
      </BrowserRouter>
    )

//  src/component/islogin.js

import React,{Component} from 'react'
function islogin(Main){
    return class extends Component{
         state ={
              islogin:false
         }
         componentDidMount(){
             let token = localStorage.getItem("token")
             if(token){
                  this.setState({
                       islogin:true
                  })
             }else{
                 this.props.history.push('/login')
             }
         }
         render(){
            let {islogin} = this.state
            return islogin ? <Main {...this.props}></Main> : <div>loading...</div>
         }
    }
}

export default islogin

###jwt.sign({data},this.config.keys,{expiresIn:"4h"})

let { username, password } = this.state
axios.post("/login", { username, password }).then(data => {
      //get token
      let token = data.data.token;
      //localStorage token
      localStorage.setItem("token", token);
      //jump router
      this.props.history.push("/main");
    });

/server/app/controller/main.js

three list connet

This project makes use of the HTML5 history api, based on immutable-js. if you need to route asynchronously, try set skipRendering to true during loading undefined

async getInfo(){
        let {token} = this.ctx.request.body
        let data = jwt.verify(token,this.config.keys).res   //{ id: 1, identity: 'v0', username: 'super', password: '123' }
        let res ={identityId:data.identity}
        let {identity} =data  //  v0            
        let identityData = await this.app.mysql.get('identity',{id:identity})   //{ identity: 'SuperUser', id: 'v0', access: '1,2,3' }
        res.user=identityData.identity  // {user:SuperUser}
        let {access} =identityData   // '1,2,3'
        let sql = `select * from access where ${access.split(',').map(item=>`id=${item}`).join(" or ")}`
        let accessData =await this.app.mysql.query(sql)  
        console.log(accessData)
        res.btnList=accessData
        this.ctx.body=res
     }

/src/view/main.js

 //Click OK to judge whether the header is added or edited for different operations
    handleOk = () => {
        let { listname, listtel, title, editID } = this.state
        //add
        if (title === "add") {
            axios.post('/add', { listname, listtel }).then(res => {
                console.log(res)
            })
            this.setState({
                show: false,
            })
        // update 
        } else if (title === "update") {
            //phone /zhengze/
            let reg = /^1[3-5|7-8][0-9]{9}$/
            if (!reg.test(listtel)) {
                alert("write error")
                return
            }
            let obj = {
                name: listname,
                tel: listtel,
                id: editID
            }
            axios.post('edit', { obj }).then(res => {
                console.log(res)
                this.setState({
                    show: false
                })
            })
        }
        axios.get('/list').then(res => {
            console.log(res)
            this.setState({
                listData: res.data.listData
            })
        })
    }
    //show 
    show = () => {
        this.setState({
            show: true,
            title: "add",   //add tianjia jiekou
            listname: "",
            listtel: ""
        })
    }
    handleEdit = (item) => {
        this.setState({
            show: true,
            title: "update",
            listname: item.name,
            listtel: item.tel,
            editID: item.id
        })

    }


    componentDidMount() {
        let token = localStorage.getItem('token')
        //login User qx
        axios.post('/getInfo', { token }).then((res) => {
            console.log(res)
            this.setState({
                user: res.data.user,
                identityId: res.data.identityId,
                btnlist: res.data.btnList
            })
            if (res.data.user === "SuperUser") {
                this.setState({
                    add: true,
                    dels: true,
                    look: true,
                    edit: true
                })
            } else if (res.data.user === "User") {
                this.setState({
                    add: false,
                    dels: false,
                    look: true,
                    edit: true
                })
            } else if (res.data.user === "keren") {
                this.setState({
                    add: false,
                    dels: false,
                    look: true,
                    edit: false
                })
            }
        })
        //find shuju list
        axios.get('/list').then(res => {
            console.log(res)
            this.setState({
                listData: res.data.listData
            })
        })
    }