DvaJS

【DvaJS】Router（上）

Posted by ARTROY on 2019-06-05

效果图

Router配置

设置根路径

router.js 文件， 其中 <Route path='/' exact component={IndexPage} /> 中的 exact 要注释掉，否则将无法跳转其他链接。

1
2
3
4
5
6
7
8
9
10
11
12
13
import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage from './pages/IndexPage';
function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
        <Route path='/' component={IndexPage} />  {/** exact */}
      </Switch>
    </Router>
  );
}
export default RouterConfig;

路由地址

在 IndexPage.js 设置相关路由，并导入导航栏。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 引入相关路由组件
import Home from './Home'
import Menu from './Menu'

// 設置路由
function IndexPage(props) {
    return (
       <Content className={styles.content}>
            <Switch>
                <Route path='/home' component={Home}/>
                <Route path='/manage' component={Manage}/>
                <Redirect to='/home'/>    {/* 重定向路由，以上url差找不到则跳转该路由*/}
            </Switch>
        </Content>
    )
}

路由跳转

在 NavBar 组件设置跳转。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
class NavBar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedKeys: []
        }
    }
    componentDidMount() {
        this.onHandleSelKey(this.props.location.pathname)
    }
    componentWillReceiveProps(nextProps) {
        const {pathname: preName} = this.props.location;
        const {pathname: nextName} = nextProps.location;
        // 当路由改变时才执行该函数
        if(preName !== nextName) {
           this.onHandleSelKey(nextName)
        }
    }
    onHandleSelKey(pathname) {
        // 根据'/'路由地址拆分成数组
        const temp = pathname.split('/');
        // 判断数组长度小于2时，表示只有根路径'/'，则设置默认home，否则去数组的第二个值
        const keys = temp.length < 2 ? 'home' : temp[1];
        this.setState({selectedKeys: [keys]})
    }
    render() {
        return (
            <Menu
                className={styles['menu-left']}
                mode={'horizontal'}
                defaultSelectedKeys={['home']}
                selectedKeys={this.state.selectedKeys}
            >
                <Menu.Item key={'home'}><Link to={'/home'}>主页</Link></Menu.Item>
                <Menu.Item key={'manage'}><Link to={'/manage'}>管理</Link></Menu.Item>
            </Menu>
        )
    }
}

Router优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
/** router.js */

// 01、 配置路由
const RouteConfig = [
  {
    path: '/',
    component: IndexPage,
    routes: [
        {
            path: '/home',
            component: Home,
            redirect: true,
            isAuthority: true,
        }, {
            path: '/manage',
            component: Manage,
            isAuthority: true,
        }
    ]
  }
]
// 02、渲染
function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
        {/* <Route path='/' component={IndexPage} /> */}   {/** exact */}
        {RouteConfig.map((route, i) =>  
            <SubRoutes {...route} key={i} />
        )}
      </Switch>
    </Router>
  );
}

/** IndexPage.js */
function IndexPage(props) {
    return (
          <Switch>
                {routes.map((route, i) => <SubRoutes {...route} key={i} />)}
        
                {/**  
                    * 重定向方式：
                    * 如果路由配置中沒有 redirect: true 通过循环渲染重定向
                    * 则默认第一个路由为重定向路由
                    *  <Redirect exect form={'/'} to={routes[0].path} />
                    */}
                {/* <Redirect exect={true} form={'/'} to={routes} /> */}
                <RedirectRoute exect={true} form={'/'} routes={routes} />

                {/**
                   * 输入连接不存在
                   */}
            <NoMatchRoute />
        </Switch> 
    )
}

/** SubRoutes.js */
export default function SubRoutes({routes, component: Component}) {
    return (
        <Route render={props => <Component {...props} routes={routes} />} />
    )
}

// 重定向封装组件
export function RedirectRoute({routes, from, exact}) {
   const router = routes.filter(item => item.redirect);
   const to = router.length ? router[0].path : routes[0].path;
   return <Redirect exact={exact} from={from} to={to}/>
}

// 找不到页面组件
export function NoMatchRoute({ status=404 }) {
    return <Route render={props => <NoMatch {...props} status={status} />} />
}

赏 支付宝打赏 微信打赏

欣赏此文，打赏一下



标签
DvaJS
参与社区
-->