react-router-config的使用

安装 react-router-config：yarn add react-router-config

创建Home组件、My组件、Rank组件和SongList组件

./Home.js组件

 export default function Home() {

   return <div>Home</div>

}

./My.js组件

import { Link, Switch } from "react-router-dom"

import {renderRoutes } from 'react-router-config'

export default function My(props) {

  return (

    <div>

      <div>My</div>

      <ul>

        <li> <Link to="/my/rank">Rank</Link> </li>

        <li> <Link to="/my/songlist">SongList</Link> </li>

       </ul>

      <Switch>

        {renderRoutes(props.route.children)}

      </Switch>

    </div>

  )

}

./Rank.js组件

export default function Rank() {

  return <div>Rank</div>

}

./SongList.js组件

export default function SongList() {

  return <div>SongList</div>

}

创建./router.js文件并写入以下内容

import Home from "./Home";

import My from "./My";

import Rank from './Rank'

import SongList from "./SongList";

import { Redirect } from 'react-router-dom'

const routes = [{

        path: '/',

        render: () => <Redirect to="/home"></Redirect>,

        exact: true

    },{

        path: '/home',

        component: Home

    },{

        path: '/my',

        component: My,

        children: [{

                path: '/my',

                render: () => <Redirect to="/my/rank"></Redirect>,

                exact: true

            },{

                path: '/my/rank/',

                component: Rank,

            },{

                path: '/my/songlist',

                component: SongList,

            }]

    }]

export default routes

在项目入口文件./index.js

import React, { Component } from 'react'

import ReactDom from 'react-dom'

import { BrowserRouter as Router } from 'react-router-dom'

import { Link, Switch } from 'react-router-dom'

import { renderRoutes } from 'react-router-config'

import router from './router'

import { BrowserRouter as Router } from 'react-router-dom'

export default class App extends Component {

    render() {

        return (

            <div>

                <ul>

                    <li>

                        <Link to="/home" replace >主页</Link>

                    </li>

                    <li>

                        <Link to="/my" replace>我的</Link>

                    </li>

                </ul>

                <Switch>

                    {renderRoutes(router)}

                </Switch>

            </div>

        )

    }

}

ReactDom.render(

    <React.StrictMode>

        <Router>

            <App />

        </Router>

    </React.StrictMode>,

    document.getElementById('root')

)