路由配置

本节目标：理解“路由配置”的核心思路，并能把它用于实际开发或面试表达。

说明：原 OneNote 中有图片引用，但图片未包含在导出目录中；本页保留了可用的文字与代码内容。 路由文件编写开发之前一般要将功能按菜单组织起来，然后进行路由配置 ==应用的骨架其实非常简单，顶部有固定的内容及== tab ==栏，下面对应不同的功能组件。==

==首先====路由配置相关====安装依赖。==

npm install react-router react-router-dom react-router-config --save

==现在我们在== routes ==目录下新建== index.js ==文件，利用== react-router-config ==来对路由进行配置。==

//routes/index.jsimport React from 'react';import { Redirect } from "react-router-dom";import Home from '../application/Home';import Recommend from '../application/Recommend';import Singers from '../application/Singers';import Rank from '../application/Rank';
export default [  {    path: "/",    component: Home,    routes: [      {        path: "/",        exact: true,        render: () => (          <Redirect to={"/recommend"}/>        )      },      {        path: "/recommend",        component: Recommend      },      {        path: "/singers",        component: Singers      },      {        path: "/rank",        component: Rank      }    ]  }]

> 来自

 <https://juejin.im/book/5da96626e51d4524ba0fd237/section/5da971e851882562207e87ca>