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,
    }
]

   2.app.js组件里渲染

   

import React from 'react';
import { BrowserRouter,Switch,Route,Redirect } from 'react-router-dom'
import { renderRoutes } from "react-router-config";
import Header from './components/header'
import {router,redirectRoutes} from './router'

function App() {
  return (
      <BrowserRouter>
          <Header />
          <div className="page-wrapper">
          <Switch>
              {
                  redirectRoutes.map((item,index)=>{
                      return (
                          <Route key={index} exact={item.exact} path={item.path}>
                              <Redirect to={item.redirect} />
                          </Route>
                      )
                  })
              }
          {renderRoutes(router)}
          </Switch>
          </div>
      </BrowserRouter>
  );
}


export default App;

  3.使用

<div className="headerL">
                            <ul className="header-menu-content">
                                    <OwnNavLink tag="li" to="/data" activeClassName="active">
                                    数据管理
                                    <ul className="child-content clearfix">
                                        <li>
                                            <OwnNavLink tag="li" to="/data/list" activeClassName="active">
                                                门锁列表
                                            </OwnNavLink>
                                        </li>
                                    </ul>
                                    </OwnNavLink>
</ul>
</div>