react中怎么使用route

方法一：

根目录下router/index.js

import Home from '../App';
import NotFound from '../components/notfound'
import DashBoard from '../components/dashBoard'
import List from '../components/list'
import Setting from '../components/setting'
import Add from '../components/add'
import Login from '../components/login'
export const routes =[
    {
        path:'/home',
        component:Home
    },
    {
        path:'/login',
        component:Login
    },
    {
        path:'/404',
        component:NotFound
    }
]

export const subRoutes =[
    {
        path:'/home/dashboard',
        component:DashBoard,
        roles:["admin","abc"]
    },
    {
        path:'/home/list',
        component:List,
        roles:["admin","abc"]
    },
    {
        path:'/home/setting',
        component:Setting,
        roles:["admin"]
    },
    {
        path:'/home/add',
        component:Add,
        roles:["admin"]
    }
]

根目录下创建index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {routes} from './router'  //引入第一级路由的数组
import * as serviceWorker from './serviceWorker';
// import App from "./App"
// import NotFound from './components/notfound'
import {BrowserRouter as Router,Route,Switch,Redirect} from 'react-router-dom'
    

ReactDOM.render(
     <Router>
        <Switch>
            {
                routes.map((item)=>{
                    return <Route key={item.path} path={item.path} component={item.component} />
                })
            }
            <Redirect from="/" to="/home" exact />
            <Redirect to="/404" />
        </Switch>
    </Router>, document.getElementById('root'));

在根目录下的App.js中输入

import React from 'react';
import {subRoutes} from './router'
import {Route,Redirect,Switch} from 'react-router-dom'
import Admin from './components/admin'
import MyRoute from './components/myroute'
function App() {
  return (
    <div className="App">
           {sessionStorage.getItem("token")?
          <Admin>
              <Switch>
                {
                    subRoutes.map((item)=>{
                      return <MyRoute key={item.path} path={item.path}
                       component={item.component} roles={item.roles} />
                    })
                }
                {/* 设置默认进入的页面 */}
                <Redirect from="/home" to="/home/list" exact />
             </Switch>
          </Admin>:<Redirect to="/login" />}
    
    </div>
   
  );
}

export default App;

在根目录下中的components/myroute/index.js

import React, { Component } from 'react'
import {Route,Redirect} from 'react-router-dom';
export default class MyRoute extends Component {
    render() {
        let {path,component:Com,roles} = this.props;
        var permission = roles.some((item)=>item===sessionStorage.getItem("username"));
     
        return (
            <Route path={path} render={(props)=>{
                 return permission?<Com {...props} />:<div>您无权访问</div>
            }} />
        )
    }
}

方法二

// 导入库
import React,{Component} from 'react';
import {
    HashRouter as Router,
    Route,
    Switch,
    Redirect
} from 'react-router-dom';

// 导入组件
import Login from '../pages/login/index';
import Admin from '../pages/admin/index';
import Dashboard from '../pages/dashboard/index';
import Articles from '../pages/articles/index';
import Settings from '../pages/settings/index';
import Frame from '../components/frame/index';
import Err404 from '../components/err/404';
import Err500 from '../components/err/500';

class ReactRouter extends Component
{
    render()
    {
        return (
            <Router>
                <Switch>
                    <Route path="/login" component={Login}></Route>
                    <Route path="/admin">
                        <Frame>
                            <Switch>
                                {/* 
                                备注：后期这里有很多很多路由
                                举例：订单路由、商品路由等
                                */}
                                <Route path="/admin/dashboard" component={Dashboard}></Route>
                                <Route path="/admin/articles" component={Articles}></Route>
                                  
                                <Route path="/admin/settings"    component={Settings}></Route>
                                <Route path="/admin" exact component={Admin}></Route>
                            </Switch>
                        </Frame>
                    </Route>
                    <Route path="/404" component={Err404}></Route>
                    <Route path="/500" component={Err500}></Route>
                    <Redirect to="/404" /> 
                </Switch> 
            </Router>
        )
    } 
}

export default ReactRouter;

export default PrivateRoute(ReactRouter);

// 导入react全家桶
import React from 'react'
import { Route, Redirect } from 'react-router-dom'

// 手册：https://reacttraining.com/react-router/web/example/auth-workflow
  
// 自定义私有路由高阶组件
const PrivateRoute = ({component: Component, ...props}) => {
    // 解构赋值 将 props 里面的 component 赋值给 Component
    return <Route {...props} render={() => {
        const token = localStorage.getItem('token' )
        if (token){ // 如果登录了, 返回正确的路由
            return <Component />
        } else { // 没有登录就重定向至登录页面
            return <Redirect to='/login'/> 
        }
    }}/>
}

// 导出
export default PrivateRoute