react集成路由

前記

這2天搞了react的路由實現了一個小功能，就是點擊對應側邊欄，改變頁面，效果圖如下

代碼

首先，安裝react-router-dom和ant design

App.js代碼

import React, {Component} from 'react';
import './App.css';
import {observer} from 'mobx-react';
import SiderBar from './components/common/sider'
import {Layout} from 'antd';
import Hospital from "./components/hospital";
import {
    BrowserRouter, //容器 推薦用這個
    Route //一條路由
} from 'react-router-dom';
import RouteVeiw from './components/common/route'


const {Sider, Content} = Layout;


@observer
class App extends Component {

    constructor(props) {
        super(props)
    }

    render() {
        return (

            <BrowserRouter>
                <Layout className="App">
                    <Sider>
                        <SiderBar/>
                    </Sider>

                    <Content>
                        <header className="App-header"/>
                        <RouteVeiw/>
                    </Content>
                </Layout>
            </BrowserRouter>

        );
    }
}

export default App;

側邊欄js

import React, {Component} from 'react';
import {Layout, Menu, Breadcrumb, Icon} from 'antd';
import {BrowserRouter as Router, Link, Route} from "react-router-dom";
import Hospital from "../hospital";

const {Header, Content, Footer, Sider} = Layout;
const SubMenu = Menu.SubMenu;


class SiderBar extends React.Component {
    state = {
        collapsed: false,
    };

    onCollapse = (collapsed) => {
        console.log(collapsed);
        this.setState({collapsed});
    }


    render() {
        return (


                <div>
                    <Layout style={{minHeight: '100vh'}}>


                        <Sider
                            collapsible
                            collapsed={this.state.collapsed}
                            onCollapse={this.onCollapse}>

                            <div className="logo"/>

                            <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
                                <Menu.Item key="1">
                                    <Icon type="pie-chart"/>
                                    <span><Link to={"/hospital"} style={{color:'white'}}>醫院信息</Link></span>
                                </Menu.Item>
                                <Menu.Item key="2">
                                    <Icon type="desktop"/>
                                    <span><Link to={"/menber"}  style={{color:'white'}}>成員信息</Link></span>
                                </Menu.Item>
                                <SubMenu
                                    key="sub1"
                                    title={<span><Icon type="user"/><span>用戶</span></span>}
                                >
                                    <Menu.Item key="3">用戶Tom</Menu.Item>
                                    <Menu.Item key="4">用戶Bill</Menu.Item>
                                    <Menu.Item key="5">用戶Alex</Menu.Item>
                                </SubMenu>
                                <SubMenu
                                    key="sub2"
                                    title={<span><Icon type="team"/><span>團隊</span></span>}
                                >
                                    <Menu.Item key="6">團隊 1</Menu.Item>
                                    <Menu.Item key="8">團隊 2</Menu.Item>
                                </SubMenu>
                                <Menu.Item key="9">
                                    <Icon type="file"/>
                                    <span>文件</span>
                                </Menu.Item>
                            </Menu>
                        </Sider>


                    </Layout>
                </div>

        );
    }
}

export default SiderBar

說明

主要思路是，把Router掛載到最外面，然後link標籤放置側邊欄，配置放置RouteVeiw統一配置。
缺點是組件之間的耦合，僅作爲參考。

參考文章

react-reoute學習

項目地址

react route 項目