路由文件及其使用

墨蓝 2021-07-24 18:21 375阅读 0赞

1、新建路由文件,根据路由的不同作用,划分成不同模块
    	export const mainRoutes=[
    		{
    		    path:'/x',
    		    component:X,
    		    exact:true   如果需要精确匹配
    		},
    		{
    		    path:'/x',
    		    component:X
    		}
    	]
    	export const otherRoutes=[
    			...
    	]
    	
    2、构建路由:
    	index.js放置如登录等的入口路由
    	App.js放置登录后的主要内容路由
    	路由文件中的属性通过map遍历来生成路由,使用{...item}解构将所有属性放在<Route />内

代码示例:  
routes下的index.js:

import Login from '../pages/login'
    import Index from '../pages/admin/dashboard/index'
    import List from '../pages/admin/products/list'
    import Edit from '../pages/admin/products/edit'
    import PageNotFound from '../pages/PageNotFound'
    
    export const mainRoutes=[{ 
        path:'/login',
        component:Login
    },
    { 
        path:'/404',
        component:PageNotFound
    }
    ]
    
    export const adminRoutes=[{ 
        path:'/admin/dashboard',
        component:Index
    },
    { 
        path:'/admin/products',
        component:List,
        exact:true
    },
    { 
        path:'/admin/products/edit/:id',
        component:Edit
    }
    ]

index.js:

import React from 'react';
    import ReactDOM from 'react-dom';
    import { HashRouter,Switch,Route,Redirect} from 'react-router-dom'
    import './index.css';
    import * as serviceWorker from './serviceWorker';
    import App from './App';
    import { mainRoutes} from './routes/index';
    
    ReactDOM.render(
      <HashRouter>
          <Switch>
            <Route path='/admin' render={ routeProps=><App { ...routeProps}></App>}></Route>
           { mainRoutes.map(route=>{ 
             return <Route key={ route.path} { ...route}></Route>
           })}
           <Redirect to='/404'></Redirect>
          </Switch>
      </HashRouter>,
      document.getElementById('root')
    );
    
    // If you want your app to work offline and load faster, you can change
    // unregister() to register() below. Note this comes with some pitfalls.
    // Learn more about service workers: https://bit.ly/CRA-PWA
    serviceWorker.unregister();

App.js

import React from 'react';
    import './App.css';
    import { Switch,Route,Redirect} from 'react-router-dom'
    import { Button} from 'antd'
    import 'antd/dist/antd.css'
    import { adminRoutes} from './routes/index'
    
    function App() { 
      return (
        <div className="App">
          <h1>app</h1>
          <Switch>
            { adminRoutes.map(route=>{ 
              return <Route  key={ route.path} path={ route.path} exact={ route.exact} render={ routeProps=>{ 
                return <route.component { ...routeProps}></route.component> 
              }}></Route>
            })}
            <Redirect to='/404'></Redirect>
          </Switch>
        </div>
      );
    }
    
    export default App;