react集成路由

• Z时代
• 2024-01-10
• 分类：综合

前记

这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 项目

以上是 react集成路由 的全部内容， 来源链接： utcz.com/z/382315.html