react路由 react-router-dom

1.新建rouer路由js

import index from "../views/Index/index.jsx";
import Login from "../views/Login/Login.jsx";
import PageNotFiound from "../views/PageError/PageNotFiound.jsx";
import ServeError from "../views/PageError/ServeError.jsx";

export const MainRouter = [
    { path: "/index", component:index, title: '首页' },
    { path: "/login", component:Login, title: '登陆' },
    { path: "/404", component:PageNotFiound, title: '404' },
]

2.index.js 中引入

import { HashRouter, Switch, Route, Redirect } from 'react-router-dom'
import {MainRouter} from './router/index'

ReactDOM.render(
  <HashRouter>
    <Switch>
      {
        MainRouter.map(item=>{
          return <Route key={item.path} {...item}/>
        })
      }
      <Redirect to="/404"/>
    </Switch>
  </HashRouter>
  ,
  document.getElementById('root')
);