admin管理员组文章数量:1633915
Dva 中已经内置了 React Router,不需要再额外下载,直接配置使用即可。
一、全局引入路由
Dva 中已经自动生成了路由的引入代码,在 src/index.js 文件中:
app.router(require('./router').default);
我们也可以将 require(’./router’).default 改成 import from 的语法:
import router from './router'
app.router(router);
二、路由的模式
Dva 项目中路由也同样的分为两种模式:hash 和 history。
默认是 hash 模式。我们可以自己手动配置来将路由模式切换为 history:
1、安装依赖包
npm install --save history
2、修改路由模式
在入口文件 index.js 中进行以下配置:
const createHistory = require('history').createBrowserHistory;
const app = dva({
history: createHistory(),
});
修改完成后,浏览器的开发者工具中可能还是会有红色的警告。如果需要处理的话,找到 node_modules/dva/lib/index.js 文件中的第 22 行代码:
// var _createHashHistory = _interopRequireDefault(require("history/createHashHistory"));
var _createHashHistory = _interopRequireDefault(require("history").createHashHistory);
三、配置一级路由
import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage from './routes/IndexPage';
import LoginPage from './routes/LoginPage';
function RouterConfig({ history }) {
return (
<Router history={history}>
<Switch>
<Route path="/home" component={IndexPage} />
<Route path="/login" component={LoginPage} />
</Switch>
</Router>
);
}
export default RouterConfig;
注:一级路由的 path 不要以 /index 命名。
四、配置二级嵌套路由
import React from 'react';
import { Switch, Route } from 'dva/router';
import TodoList from './TodoList';
import Counter from './Counter';
export default function IndexPage() {
return (
<>
<p>首页</p>
<div>
<Switch>
<Route path="/home/todoList" component={TodoList}></Route>
<Route path="/home/counter" component={Counter}></Route>
</Switch>
</div>
</>
);
}
配置二级路由时,浏览器中又会出现语法报错。需要找到 public/index.html 文件,对代码进行以下修改:
<!-- <script src="index.js"></script> -->
<script src="/index.js"></script>
五、路由跳转和传参
在 Dva 项目中,路由跳转和传参跟之前 React Router 中语法一致,但是不支持第三方 Hook。
import React from 'react'
export default function LoginPage({history}) {
return (
<div>
<button onClick={() => {
history.push('/index')
}}>登录</button>
</div>
)
}
版权声明:本文标题:Dva路由配置(基于React) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729176816a1188823.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论