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;