react-router路由使用时引入Route时报错

问题描述

        今天使用

npx create-react-app

命令初始化了一个react应用，然后安装antd和react-router-dom模块后准备进行开发，到配置路由这一步的时候，引入BrowserRouter和Link是正常的，但是引入Route的时候代码却出现了提示，此模块不能使用。

        在模块安装文件夹中查看时发现Route.js这个模块是安装了的。如果你不管代码提示，还是继续使用Route的话运行项目会报错，具体信息提示说某些属性的大小写不受支持等信息。这个问题网上查了很久没有答案，终于在自己试探下得到了解答。

        原来我用npx create-react-app创建的项目，里面用到的插件基本都默认是最新版本的，所以安装react-router-dom的时候也默认安装了最新版本5.0.1，所以在引入Route模块时出现了报错消息，看来5版本的react路由跟之前的使用方法差别是比较大的。

        那原因找到之后，解决起来就很简单，我们先卸载掉安装的5.0.1的react-router-dom，然后通过命令

npm install react-router-dom@4.3.1 --save

来安装4.3.1版本的路由，此时引入时就能正常使用了。如图：

整份代码如下所示，就当是做一个备份吧：

import React,{Component} from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
import { Layout, Menu, Icon } from 'antd';

import Demo01 from "./components/ArcGIS-EChart/demo01/demo01";
import Demo02 from "./components/ArcGIS-Mapv/demo01/demo02";

const { Header, Sider, Content } = Layout;

class Main extends Component {

    state = {
        collapsed: false,
    };

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };

    //生命周期函数
    componentDidMount=()=>{

    }

    render() {

        return (
            <Router>
            <Layout>
                <Sider trigger={null} collapsible collapsed={this.state.collapsed} style={{minHeight:947,backgroundColor:'white'}}>
                    <div className="logo">

                    </div>
                    <Menu theme="light" mode="inline" defaultSelectedKeys={['1']}>
                        <Menu.Item key="1">
                            <Link to="/">
                                <Icon type="user" />
                                <span>nav 1</span>
                            </Link>
                        </Menu.Item>
                        <Menu.Item key="2">
                            <Link to="/02">
                                <Icon type="video-camera" />
                                <span>nav 2</span>
                            </Link>
                        </Menu.Item>
                        <Menu.Item key="3">
                            <Icon type="upload" />
                            <span>nav 3</span>
                        </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}
                            style={{fontSize:22,paddingLeft:15}}
                        />
                    </Header>
                    <Content
                        style={{
                            margin: '24px 16px',
                            padding: 24,
                            background: '#fff',
                            minHeight: 280,
                        }}
                    >
                        <Route exact path="/" component={Demo01} />
                        <Route path="/02" component={Demo02} />
                    </Content>
                </Layout>
            </Layout>
            </Router>
        );
    }
}

export default Main;