react 二级路由

1. 安装react-router-dom

npm intall react-router-dom@5

安装完react-router-dom引入到App页面中其中的属性有HashRouter,Redireact,Route,Switch,Link等着些属性

2. 一级路由配置如下

首先创建一个RouterIndex路由组件把创建好的页面引入，在使用reacr-router-dom的属性进行路由的配置，Redirect是路由的重定向到首页home,其中的Not是404页面。

Redirect重定向中定要加入 exact精确匹配 否则不会无效页面不会跳到404页面

import React, { Component } from 'react'
import { HashRouter,Switch,Route,Redirect } from 'react-router-dom'
import Home from '../view/Home'
import Fl from '../view/Fl'
import Not from '../view/Not'
import Index from '../view/Index'
import Login from '../view/Login'
import Xqhtml from '../view/Xqhtml'
export class RouterIndex extends Component {
  render() {
    return (
      <div>
          <HashRouter>
          <Switch>
            <Route path='/fl' component={Fl}></Route>
            <Route path='/index' component={Index}></Route>
            <Route path='/home' component={Home}></Route>
            <Route path='/login' component={Login}></Route>
            <Redirect from='/' to='/home' exact></Redirect>
            <Route component={Not}></Route>
          </Switch>
        </HashRouter>
      </div>
    )
  }
}

export default RouterIndex

以上路由配置完成引入到App中

import RouterIndex from './router/routers/RouterIndex'
export class App extends Component {
  render() {
    return (
      <div>
        <RouterIndex></RouterIndex>
      </div>
    )
  }
}

export default App

3. 二级路由配置

二级路由在首页home配置

import React, { Component } from 'react'
import { Switch,Redirect,Route,NavLink } from 'react-router-dom'
import Comfy from './ejhtml/Comfy'
import Notfy from './ejhtml/Notfy'
export class Home extends Component {
  render() {
    return (
      <div>
        <Switch>
          <Route path='/home/comfy' component={Comfy}></Route>
          <Route path='/home/notfy' component={Notfy}></Route>
          <Redirect from='/home' to='/home/comfy'></Redirect>
        </Switch>
      </div>
    )
  }
}

export default Home