React-router 手动实现静态路由（staticRoute）

使用vue的同学都知道，vue的路由是静态的。什么叫做静态的呢？那就是可以通过一个配置文件来进行路由的配置，而我们的react的路由是动态的。为啥这么说呢？react路由具有先天的优势——jsx . 每一个页面都是组件，每一个组件可以随意的嵌套。所以react的路由是动态加载的。那么我们是否也可以向vue一样，使用一个静态文件来自动配置呢？答案是：肯定可以的。

• 使用 npm install react-router-config 安装这个包，就可以使用静态路由了。详情配置文件查看官网
• 我们可以自己手动来实现，因为react-router是非常灵活的。本文就描述大概手动实现的思路

效果

正文

声明配置文件

通过vue的配置文件，我们知道，配置文件最外层一定是一个数组，并且数组里面的对象有children属性。那么我们就构建一个这样的数组。如下：

// 这个对象数组的目的是，含有 Route 里面所有的属性，然后我们也可以自定义一些 name 啥，只是需要我们去手动处理。
const routeConfig = [
  {
    path: '/news', component: New, exact: false,
    // 这里的children里面的path是需要合并上父级的path。这样path就不会重复
    children: [
      { path: '/content', component: NewsCont, exact: true },
      { path: '/other', component: NewsOther, exact: true },
      { path: '/', component: NewsIndex, exact: true },
    ]
  },
  { path: '/', component: Index, exact: true },
]

展示组件试图（view）

vue 在注册好router 后，有一个组件叫做 <router-view> ，来作为所有组件的出口。因此我们在react 中也可以实现一个组件，来作为跟组件的出口。

/**
 * 核心组件的声明
 */
interface IRootRouteProp {
  routeConfig: routeObj[],
  basePath?: string,
}
/**
 * 核心关键组件
 * @param param0 
 * @returns 
 */
function RootRoute({ routeConfig, basePath = '' }: IRootRouteProp) {
  if (routeConfig.length === 0) {
    return <></>
  }
  // 判断根路径不能为空
  const rt = routeConfig.map((it, index) => {
    const { component: Comp, children: Child, path, ...rest } = it;
    // 获取一个新的路径，并且把 // 替换成 /
    const newPath = (basePath + path).replace(/\/\./g, '/');
    // 是否需要使用exact 进行精确匹配
    const isExact = 'exact' in it ? it.exact : true
    // ... 这里还可以拓展其他的属性,例如 如果需要使用vue的name属性的话
    return (
      <Route
        key={newPath}
        {...rest}
        exact={isExact}
        path={newPath}
        render={(value) => {
          let crt: JSX.Element = <></>;
          if (Array.isArray(Child) && Child.length > 0) {
            crt = RootRoute({ routeConfig: Child, basePath: newPath })
          }
          return (
            <Comp {...value} >
              {/* 把子组件的route 放在children中， */}
              {crt}
            </Comp>
          )
        }}
      />
    )
  })
  return (
    <Switch>
      {rt}
    </Switch>
  )
}

然后我们在跟组件中就可以直接这么使用：

 {/* 类似 vue的route-view */} 这里传递配置文件的参数
  <RootRoute routeConfig={routeConfig} />

在子组件中我们也是需要使用出口的，方式是：

  {/* 重新匹配子路由，这一行很关键，子组件是否能够匹配到路由 */}
  // 因为我们把嵌套的子路由是放在了children属性中，需要在子组件中进行一下渲染
      {prop.children}

最终代码

import React from 'react'
import { BrowserRouter as Router, NavLink, Route, RouteComponentProps, Switch, useRouteMatch } from 'react-router-dom'
/**
 * 测试组件
 * @returns 
 */
export default function StaticRoute() {
  return (
    <div>
      <Router>
        <NavLink exact activeStyle={{ color: '#F40' }} to='/' style={{ marginRight: '20px' }}>首页</NavLink>
        <NavLink activeStyle={{ color: '#F40' }} to='/news'>新闻页</NavLink>
        {/* 类似 vue的route-view */}
        <RootRoute routeConfig={routeConfig} />
      </Router>
    </div>
  )
}

/**
 * 首页
 * @returns 
 */
function Index() {
  return <h1>首页</h1>
}

interface INew {
  children?: JSX.Element
}
/**
 * 新闻组件
 * @param prop 
 * @returns 
 */
function New(prop: INew) {
  const rm = useRouteMatch()
  return (
    <div>
      <div style={{ margin: '30px' }}> 新闻页</div>
      <NavLink exact activeStyle={{ color: '#F40' }} to={`${rm.path}/`} style={{ marginRight: '20px' }}>新闻首页</NavLink>
      <NavLink exact activeStyle={{ color: '#F40' }} to={`${rm.path}/content`} style={{ marginRight: '20px' }}>新闻内容</NavLink>
      <NavLink exact activeStyle={{ color: '#F40' }} to={`${rm.path}/other`} style={{ marginRight: '20px' }}>新闻其他页</NavLink>
     
     
      {/* 重新匹配子路由，这一行很关键，子组件是否能够匹配到路由 */}
      {prop.children}
    </div>
  )
}
/**
 * 新闻首页
 * @returns 
 */
function NewsIndex() {
  return <h2>新闻首页的详情士大夫十分</h2>
}
/**
 * 新闻内容
 * @returns 
 */
function NewsCont() {
  return <h2>新闻内容的详情孙菲菲</h2>
}
/**
 * 其他新闻
 * @returns 
 */
function NewsOther() {
  return <h2>新闻其他是的方法可你男看就</h2>
}

/**
 * 核心组件的声明
 */
interface IRootRouteProp {
  routeConfig: routeObj[],
  basePath?: string,
}
/**
 * 核心关键组件
 * @param param0 
 * @returns 
 */
function RootRoute({ routeConfig, basePath = '' }: IRootRouteProp) {
  if (routeConfig.length === 0) {
    return <></>
  }
  // 判断根路径不能为空
  const rt = routeConfig.map((it, index) => {
    const { component: Comp, children: Child, path, ...rest } = it;
    // 获取一个新的路径，并且把 // 替换成 /
    const newPath = (basePath + path).replace(/\/\./g, '/');
    // 是否需要使用exact 进行精确匹配
    const isExact = 'exact' in it ? it.exact : true
    // ... 这里还可以拓展其他的属性
    return (
      <Route
        key={newPath}
        {...rest}
        exact={isExact}
        path={newPath}
        render={(value) => {
          let crt: JSX.Element = <></>;
          if (Array.isArray(Child) && Child.length > 0) {
            crt = RootRoute({ routeConfig: Child, basePath: newPath })
          }
          return (
            <Comp {...value} >
              {/* 把子组件的route 放在children中， */}
              {crt}
            </Comp>
          )
        }}
      />
    )
  })
  return (
    <Switch>
      {rt}
    </Switch>
  )
}

/**
 * 路由对象声明
 */
interface routeObj {
  path: string;
  component: React.ComponentType<RouteComponentProps<any>> | React.ComponentType<any>;
  exact: boolean;
  children?: routeObj[]
}

// 配置文件
const routeConfig: routeObj[] = [
  {
    path: '/news', component: New, exact: false,
    children: [
      { path: '/content', component: NewsCont, exact: true },
      { path: '/other', component: NewsOther, exact: true },
      { path: '/', component: NewsIndex, exact: true },
    ]
  },
  { path: '/', component: Index, exact: true },
]