dva学习-route路由学习

逃离我推掉我的手 2022-05-17 13:15 308阅读 0赞

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

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

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

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

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

![70][]

这里的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打印出来看一下

[70]: /images/20220517/5a9f7e7523e6431f8397ec46416ad391.png