redux路由配置

路由基本配置

npm i react-router-dom

import React from 'react'
import {HashRouter,Route,Switch,Link} from 'react-router-dom'
import Index from '../pages/component/Index.js'
import Register from '../pages/component/info/register.js'
import Setting from '../pages/component/info/setting.js'
import childerenSetting from '../pages/component/info/childerenSetting.js'
const BasicRoute=()=>(
    <HashRouter>
    <Link to='/index'>回到首页</Link>
     <Link to='/register'>Register</Link>
     <Link to='/setting'>setting</Link>
        <Switch>
            <Route exact path='/' component={Index}></Route>
            <Route exact path='/index' component={Index}></Route>
            <Route exact path='/register' component={Register}></Route>
            <Route exact path='/setting' render={()=>
                <Setting>
                     <Route exact path="/setting" component={Setting} />
                    <Route path="/setting/childerenSetting" component={childerenSetting} />
                </Setting>
            } ></Route>
        </Switch>
    </HashRouter>
)
export default BasicRoute

npm i react-router-config  react-loadable配置路由

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

function App() {
  return (
    <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <div className="App">
     附近的开始啦JFK了
     <HashRouter>
       {renderRoutes(routes)}
     </HashRouter>
    </div>
    </PersistGate>
    </Provider>
  );
  
}
import Loadable from './load.js'
const Index =Loadable( ()=>import('../pages/component/Index.js'))
const Register =Loadable( ()=>import('../pages/component/info/register.js'))
const Setting =Loadable( ()=>import( '../pages/component/info/setting.js'))
const childerenSetting =Loadable( ()=>import( '../pages/component/info/childerenSetting.js'))

const routes=[{
    path:'/',
    exact:true,
    component:Index,
},{
    path:'/index',
    component:Index,
},{
    path:'/register',
    component:Register,
},{
    path:'/setting',
    component:Setting,
}
]

export default routes

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值