Dva路由配置（基于React）

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>
    )
}