react-router-config的使用

react-router-config

介绍

是一个辅助react-router的插件，主要是使用配置文件集中式管理路由。

import 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,
            }
        ]
    }
]

在App.js中渲染配置文件中的组件

渲染配置文件中的组件，一次只能渲染配置文件中的一层，在上面的配置文件中即Home组件。renderRoutes(routes)函数会把routers作为props传入到Home组件中。

import React from 'react';

//style
import { IconStyle } from './assets/iconfont/iconfont';
import { GlobalStyle } from './style';
//router
import routes from './routes/index';
import {renderRoutes  } from 'react-router-config'
import { HashRouter } from 'react-router-dom'
//redux
import { Provider } from 'react-redux'
import store from './store/index'


function App() {
  return (
    <Provider store={store}>
      <HashRouter>
      <GlobalStyle></GlobalStyle>
      <IconStyle></IconStyle>
{/* renderRoutes(routes)会把routers作为props传入到Home组件中 */}
      {renderRoutes(routes)}
    </HashRouter>
    </Provider>
    
  );
}

export default App;

在Home组件中使用相同的方法渲染它的子路由

import React from 'react'
import { renderRoutes } from "react-router-config";

import {
    Top,
    Tab,
    TabItem
} from './style'
import { NavLink } from 'react-router-dom'

const Home = (props) => {
    /* 
    props: {
      history: ...,
      location: ...,
      match: ...,
      route: ...,
      staticContext: ...,
      其他自定义传入的属性: ...
    }
  */
    const { route } = props;
    return (
        <div>
            <Top>
                <span className="iconfont menu">&#xe65c;</span>
                <span className="title">WebApp</span>
                <span className="iconfont search">&#xe62b;</span>
            </Top>
            <Tab>
                <NavLink to="/recommend" activeClassName="selected"><TabItem><span > 推荐 </span></TabItem></NavLink>
                <NavLink to="/singers" activeClassName="selected"><TabItem><span > 歌手 </span></TabItem></NavLink>
                <NavLink to="/rank" activeClassName="selected"><TabItem><span > 排行榜 </span></TabItem></NavLink>
            </Tab>
            {renderRoutes(route.routes)}
        </div>
    )
}

export default React.memo(Home);