react：路由配置。

一：react-router：路由默认渲染为a标签。如果要渲染为其他标签，则需要特殊处理，封装代码如下：

// 实现Tag的封装
import {NavLink,withRouter} from 'react-router-dom'
import React from 'react'


const OwnLinkItem = (props) => {
    // 渲染成tag  实现vue中的tag功能
    let Tag = props.tag || 'a'
    // 需要添加的类名  也可以自己定义active类型 默认是active
    let _class = props.className || ''
    let _activeClassName = props.activeClassName || 'active'
    // toObj 判断参数的类型 如果to是一个对象 需要取到props.to.pathname 否则建议是否以props.to开头
    let isActive = props.toObj ? props.location.pathname === props.to.pathname: props.location.pathname.startsWith(props.to)
    // props.nav 可以保证都能加到类名 避免isActive没匹配到时 丢失类名
    let className = (props.nav && isActive )? _class + ' ' + _activeClassName : _class
    return <Tag className = {className} onClick = {()=> props.history.push(props.to)}> {props.children} </Tag>

}
export const OwnNavLink = props => {  // 加上自定义类名
    let Item = withRouter(OwnLinkItem)  // 用withRouter包上后就有了路由对象 history location match
    return (
        <Item {...props} nav/>      // 返回的就是tag的类型
    )
}

 

 二：利用react-router-config渲染路由

     1.新建路由文件，代码如下：

       

import Welcome from './../page/welcome'
import DataList from './../page/data/list'
import DataDetail from './../page/data/list/detail'
export const router = [
    {
        path: "/welcome",
        name: "Welcome",
        component: Welcome,
        exact: true,
    },
    {
        path: "/data/list",
        name: "DataList",
        component: DataList
    },
    {
        path: '/data/detail',
        component: DataDetail
    }
]
export const redirectRoutes = [
    {
        path: "/",
        redirect:"/welcome",
        exact: true,
    },
    {
        path: "/data",
        redirect:"/data/list",
        exact: true,
    }
]

View Code