【React】 17课 react简单实现跳转二级路由小项目

小项目效果图如下：

在新闻路由内实现二级路由跳转，右侧显示子路由组件内容！左边列表任然显示！

首先我们看一下简单的项目文件目录结构：

下面我们来看 App.js代码：

import React from 'react';
import {
  BrowserRouter,
  Route,
  NavLink,
  Switch,
} from 'react-router-dom';

//导入路由表
import router from "./router/index.js";


import "./static/css/index.css"

class App extends React.Component {
  state = {
    arr: []
  }

  getData = () => {
    const arr = [
      {
        to: '/',
        con: '首页'
      },
      {
        to: '/News',
        con: '新闻'
      },
      {
        to: '/Users',
        con: '用户'
      }
    ]
    this.setState({
      arr
    })
  }
  //componentDidMount:组件渲染后请求数据
  componentDidMount() {
    //getData()方法 模拟后端请求数据
    this.getData()
  }

  render() {
    //BrowserRouter根组件 挂载不同的其他组件
    return (
      <BrowserRouter>
        <div className='app'>
          <div className='topNav'>
            {
              this.state.arr.length > 0 && (
                this.state.arr.map((item, index) => {
                  return <NavLink key={index} to={item.to}> {item.con} </NavLink>
                })
              )
            }
          </div>
          <Switch>
            {
              //路由表有数据才遍历路由数据
              router.length > 0 && router.map((item, index) => {
                if (item.exact) {
                  return <Route key={index} exact={item.exact} path={item.path} component={item.component}></Route>
                } else {
                  return <Route key={index} path={item.path}
                    //render路由嵌套父子组件之间进行传值；
                    render={(props) => {
                      //返回对应组件item.component标签
                      return <item.component {...props} data={item.children} />
                    }}
                  ></Route>
                }
              })
            }
          </Switch>
        </div>
      </BrowserRouter>
    )
  }
}

export default App;

路由文件 router内index.js代码是这样的：

import Home from "../components/Home";
import News from "../components/News";
import Users from "../components/Users";
import Not404 from "../components/Not404";
import Newindex from "../components/Newindex";
import Newslist from "../components/Newslist";

//配置路由表
const routes =[
  //这些是一级路由
  {
    exact: true,
    path: '/',
    component: Home
  },
  {
    path: '/News',
    component: News,
    children:[  //这里面是/News的二级路由
      {
        exact: true,
        path: '/News/',
        component: Newindex
      },
      {
        path: '/News/Newslist/:id',
        component: Newslist
      },
      {
        path: '*',
        component: Not404
      }
    ]
  },
  {
    path: '/Users',
    component: Users
  },
  {
    path: '*',
    component: Not404
  }
]

//导出路由表
export default routes

static全局样式css文件如下：

.app{
  height: 100vh;
}

.topNav{
  height: 35px;
  line-height: 35px;
  background: skyblue;
  display: flex;
  justify-content: space-around;
}

.topNav a{
  text-decoration: none;
}

/* 头部导航下面的内容 */
.navlist{
  width: 100%;
  height: calc(100% - 150px);
  display: flex;
  background: #ddd;
  justify-content: space-between;
}
/* 左边的选择栏 */
.navlist ul{
  width: 150px;
  line-height: 30px;
  background: skyblue;
  list-style: none;
}
/* 右边的内容区域 */
.navlist .con{
  width: calc(100% - 200px);
  background: skyblue;
}

Package.json配置文件代码如下：

{
  "name": "myapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

以下就是所有组件的代码了！

组件Home.jsx代码：

import React, { Component } from 'react'

export default class Home extends Component {
  render() {
    return (
      <div>
        <h2>这是首页home页面</h2>
      </div>
    )
  }
}

组件News.jsx代码：

import React, { Component } from 'react';

import {
  NavLink,
  Route,
  Switch,

} from 'react-router-dom';

//引入新闻内容组件
import Newslist from "./Newslist";
import Not404 from "./Not404";
import Newindex from "./Newindex";


export default class News extends Component {
  state = {
    num: 5
  }
  getDate = () => {
    setTimeout(() => {
      this.setState({
        num: 1
      })
    }, 3000)
  }

  componentDidMount() {
    // this.getDate()
  }

  render() {
    //获取本组件的路径path
    // console.log(this.props)
    const path = this.props.match.path
    // const path = '/News'
    //判断是否有children子路由
    let router = this.props.data

    return (
      <div style={{ height: '100vh' }}>
        <h2>这是新闻页面news页面</h2>
        <div className='navlist'>
          <ul>
            {

            }
            <li> <NavLink to={`${path}/Newslist/111`}> 新闻列表111 </NavLink> </li>
            <li> <NavLink to={`${path}/Newslist/222`}> 新闻列表222 </NavLink> </li>
            <li> <NavLink to={`${path}/Newslist/333`}> 新闻列表333 </NavLink> </li>
            <li> <NavLink to={`${path}/Newslist/444`}> 新闻列表444 </NavLink> </li>
          </ul>
          <div className='con'>
            {
              //这里面显示子路由组件
              //Switch:只匹配里面的一个路由
              //"/News/Newslist/:id" => ${this.props.match.path}/Newslist/:id
              //Newindex组件是进入新闻页面的欢迎页
            }
            <Switch>
              {/* 这里是不遍历的方法
              <Route exact path={`${path}/`} component={Newindex}></Route>
              <Route path={`${path}/Newslist/:id`} component={Newslist}></Route>
              <Route component={Not404}></Route> */}
              {
                router.length > 0 && (
                  router.map((item, index) => {
                    if (item.exact) {
                      return <Route exact key={index} {...item} />
                    } else {
                      return <Route key={index} {...item} />
                    }
                  })
                )
              }
            </Switch>

          </div>
        </div>

      </div>
    )
  }
}

组件Users.jsx代码：

import React, { Component } from 'react'

export default class Users extends Component {
  render() {
    return (
      <div>
        <h2>这是用户user页面</h2>
      </div>
    )
  }
}

组件Not404.jsx代码：

import React, { Component } from 'react'

export default class Not404 extends Component {
  render() {
    return (
      <div>
        <h1>404</h1>
      </div>
    )
  }
}

下面是News二级路由的组件代码

组件Newindex.jsx代码：

import React, { Component } from 'react'

export default class Newindex extends Component {
  render() {
    return (
      <div>
        <h2>欢迎来到新闻页面!!!!</h2>
      </div>
    )
  }
}

组件Newslist.jsx代码：

import React, { Component } from 'react'

export default class Newslist extends Component {
  render() {
    let id = this.props.match.params.id;
    
    return (
      <div>
        <h2>新闻列表{id}</h2>
      </div>
    )
  }
}