dva学习-route路由学习

最新推荐文章于 2025-06-20 17:22:56 发布

Visonws

最新推荐文章于 2025-06-20 17:22:56 发布

阅读量2.2w

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前端粗暴的dva笔记文章标签： dva dva-router

本文链接：https://blog.youkuaiyun.com/weixin_40792878/article/details/81605718

粗暴的dva笔记同时被 2 个专栏收录

11 篇文章

订阅专栏

前端

10 篇文章

订阅专栏

本文详细介绍了DVA框架在单页面应用中的实现原理及配置方法，包括路由配置、组件加载、状态管理等方面的内容，并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

dva是单页面应用，虽然有不同的路由页面，但是变化的都是js文件。

命令：curl + 网址可以查看当前网址的html，如果不同路由显示的都是相同的html文件，说明是单页面

1.src/index.js中的app.router

如下所index.js中的app.router(require('./router').default);

引用了同目录下src下的router.js文件

这里的require类似于import,这里也可以改成:

顶部导入 import RouterConfig from "./router" （这里的RouterConfig 是router.js中导出的 export default RouterConfig;）

app.router(RouterConfig); //原来的app.router改成这个

2.src/router.js

默认如下:

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage, UserPage from './routes/IndexPage';

function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/" exact component={IndexPage} />
        <Route path="/user" exact component={UserPage} />
      </Switch>
    </Router>
  );
}

export default RouterConfig;

这里面<Router>类似于React中的路由，这里<Route>标签表示路由到的某一个组件IndexPage就是我们自己定义在routes目录下的组件，可以根据不同的path路由到不同的组件下。

说明：exact 加了这个，在访问其他路由页面时，exact修饰组件（包含这个路径的）的会消失，不然后面访问的组件是在这个后面添加。如上所示加了exact,访问../user 路径时就不会访问到 “/” 的IndexPage组件了。

/src/routes/IndexPage.js文件内容如下：

import React from 'react';
import { connect } from 'dva';
import styles from './IndexPage.css';

function IndexPage() {
  return (
    <div className={styles.normal}>
      <h1 className={styles.title}>Yay! Welcome to dva!</h1>
      <div className={styles.welcome} />
      <ul className={styles.list}>
        <li>To get started, edit <code>src/index.js</code> and save to reload.</li>
        <li><a href="https://github.com/dvajs/dva-docs/blob/master/v1/en-us/getting-started.md">Getting Started</a></li>
      </ul>
    </div>
  );
}

IndexPage.propTypes = {
};

export default connect()(IndexPage);

3.访问路径中的“#”

例如路径中localhost:8000/#/ 这个路径中含有#
去掉路径中的#方式如下：
1）终端中安装： npm install --save history
2）在入口的src/ index.js中导入
import {createBrowserHistory as createHistory} from "history"
3）修改dva初始化内容 src/index.js中
const app =dva({history:createHistory()});

如上就把#去掉了，这样通过 ‘localhost:8000/ ’ 就可以访问根页面了。
默认是hashRouter 对浏览器不太好，通过上面的方式转换为BrowserHistory。需要用seo来抓取这个页面
历史变化： # 锚点最早通过#来实现单页面，跳转到不同位置； history最早是H5的history记录网页地址，后退前进一步 back(),forward()

如果地址中间要加一个#那么
把引入的BrowserRouter 改为HashRouter

4.其他补充点

1）如果这些不同的路由组件需要相同的组件，分别放在

  <Router>
     <div>
       <Navi>  //这里是导航栏，下面不同的路由都会显示
        <Route exact path="/" component={Home}>
        <Route path="/contact" component={Contact}>
        <Route path="/about" component={About}>
       <Footer> // 页脚，同理
     </div>
 </Router>

2）：传递参数、Restful方式传递
xxxx/user/:id

this.props.match.params.id 可以获取路径的值

3) .怎么在组件中通过点击按钮跳转到另外一个页面(修改路由)

方式一：通过这个命令跳转
this.props.history.push("/")

方式二：类似于js中的html中的a标签

import {Link} from “dva/router”;

方式三：

import {withRouter} from “dva/router”;

通过withRouter来使用，具体可以百度，当然还可以通过上下文的history来实现。

4) 当然这里的history也有back，go属性可以前进后退，可以把history打印出来看一下