javascript - react-router v4.1.1的二级路由点击后只改变URL，页面不跳转

问题描述

问 题

我的结构是：container里三个一级路由分别为：首页，订单，库存。对应三个组件：index，orderform，repertory。现在订单这个组件中又有三个二级路由：全部订单，待处理订单，已发货订单。现在一级路由正常，
二级路由点击只改变url，页面不跳转，哪位大神指点一下。。
container代码如下：

import React, { Component } from 'react';
import { Layout, Menu, Icon, } from 'antd';
import { BrowserRouter as Router, Route, Redirect, Link, HashRouter } from 'react-router-dom';
import './index.less';
import Index from '../pages/index/index';
import Orderform from '../pages/orderform/orderform';
import Repertory from '../pages/repertory/repertory';
import createBrowserHistory from 'history/createBrowserHistory';
const history = createBrowserHistory();
const { Header, Sider, Content } = Layout;
            <Router>
                <Layout>
                    <Sider
                        trigger={null}
                        collapsible
                        collapsed={this.state.collapsed}
                        className="menu"
                    >
                        <div className="logo" />
                        <Menu theme="dark" mode="inline" onSelect={ this.selectItem } selectedKeys={[this.state.isSelect]}>
                            <Menu.Item key="/index" ref="item">
                                <Icon type="home" />
                                <span>首页</span>
                                <Link to="/index" ref="item"></Link>
                            </Menu.Item>
                            <Menu.Item key="/orderform">
                                <Icon type="video-camera" />
                                <span>订单</span>
                                <Link to="/orderform" ref="item"></Link>
                            </Menu.Item>
                            <Menu.Item key="/repertory">
                                <Icon type="upload" />
                                <span>库存</span>
                                <Link to="/repertory"></Link>
                            </Menu.Item>
                        </Menu>
                    </Sider>
                    <Layout>
                        <Header style={{ background: '#fff', padding: 0 }}>
                            <Icon
                                className="trigger"
                                type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                                onClick={this.toggle}
                            />
                        </Header>
                        <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
                            <Route path="/index" component={Index}/>
                            <Route path="/orderform" component={Orderform}/>
                            <Route path="/repertory" component={Repertory}/>
                        </Content>
                    </Layout>
                </Layout>
            </Router>

包含二级路由的订单页面代码如下：

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { Tabs } from 'antd';
import Already from '../orders/already/already';
import All from '../orders/all/all';
import Pending from '../orders/pending/pending';
class Orderform extends Component{
    render(){
        return (

                <Router>
                    <div>
                        <Link to="/orderform/all">全部订单</Link>
                        <Link to="/orderform/pending">待处理订单</Link>
                        <Link to="/orderform/already">已发货订单</Link>
                        <Route path="/orderform/all" components={All}/>
                        <Route path="/orderform/pending" components={Pending}/>
                        <Route path="/orderform/already" components={Already}/>
                    </div>
                </Router>

        )
    }
}

解决方案

Orderform 组件render方法改为（即去掉Router标签）:

render(){
    return (
        <div>
            <Link to="/orderform/all">全部订单</Link>
            <Link to="/orderform/pending">待处理订单</Link>
            <Link to="/orderform/already">已发货订单</Link>
            <Route path="/orderform/all" component={All}/>
            <Route path="/orderform/pending" component={Pending}/>
            <Route path="/orderform/already" component={Already}/>
        </div>

    )
}

解释:
因为你已经在container里面用了Router标签（BrowserHistory）,也就是已经创建了history对象，路由的改变就靠这个对象了。
所以在你的子组件中不需要Router标签了，一个单页面应用一个Router就好了

这篇关于javascript - react-router v4.1.1的二级路由点击后只改变URL，页面不跳转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！