React 路由配置

安装react路由

yarn add react-router-dom react-router-config

使用 react-router-config 来简化路由配置

新建 routes.js 文件

import Home from "@/pages/Home"
import Mes from "@/pages/Mes"
import Tests from "@/pages/Tests"

const routes = [
  {
    path: "/home",
    exact: true,
    component: Home
  },
  {
    path: "/me",
    exact: true,
    component: Mes
  },
  {
    path: "/test",
    exact: true,
    component: Tests
  }
];

export default routes;

根文件 App.js 中引入路由：

import { renderRoutes } from 'react-router-config'
import routes from './routes'
import { HashRouter as Router } from 'react-router-dom'

import Layouts from "./components/Layouts";

function App() {
  return (
    <Router>
      <Layouts>
        {renderRoutes(routes)}
      </Layouts>
    </Router>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))