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>