dva学习-route路由学习

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”;

              <Link to="/"></Link>

方式三 ：

          import {withRouter} from “dva/router”;

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

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