React 路由

最新推荐文章于 2023-11-18 18:36:02 发布

粥猫ZHoumao

最新推荐文章于 2023-11-18 18:36:02 发布

阅读量730

点赞数

文章标签： javascript html 前端 react.js

本文链接：https://blog.csdn.net/ycj1091001986/article/details/124083070

版权

基础用法

//导入路由相关的组件
//HashRouter哈希路由 as起别名 router路由
//router 存放路由的容器
//navlink 导航链接
// Redirect 重定向
// Switch一次匹配一个页面
import { HashRouter as Router, Route, NavLink, Redirect, Switch } from 'react-router-dom'
function App() {
	return (<Router>
		<div className='nav'>
			<NavLink to="/" exact>首页</NavLink> |
			<NavLink to="/about">关于页面</NavLink> |
			<NavLink to="/details/abc">abc详情</NavLink> |
			<NavLink to="/details/123">123详情</NavLink> |
			<NavLink to="/admin">管理页面</NavLink> |
			<NavLink to="/login">登录</NavLink> |
		</div>
		<div className='views'>
			<Switch>
				<Route path="/" component={Home} exact></Route>
				<Route path="/about" component={About}></Route>
				<Route path="/details/:id" component={Details}></Route>
				<Private path="/admin">
					<Admin></Admin>
				</Private>
				<Route path="/admin" component={Admin}></Route>
				<Route path="/login" component={Login}></Route>
				{/* * 匹配任意路径 */}
				<Route path="*" component={NoMatch}></Route>

			</Switch>
		</div>
	</Router>);
}
export default App;
// 把props.chilren 解构诶children ...rest 剩余的其他参数
function Private({ children, ...rest }) {
	// 把Private组件的参数除了children全部转移到Route组件
	// Route不直接指定component通过render渲染出来
	return <Route {...rest} render={
		({ location }) => {
			// 如果获取本地存储的isLog得到了（登陆了），返回children 子节点Admin 否则 返回一个Redirect组件
			// Redirect 默认跳转到 /login登录页面 传入一个state数据 redirect自定义值 location.pathname(本来要跳转的地址)
			return localStorage.getItem("isLog") ? (children) : <Redirect to={{ pathname: "/login", state: { redirect: location.pathname } }}></Redirect>
		}
	}></Route>
}

function Login({ location, history }) {
	function logIt() {
		// 存储到本地
		localStorage.setItem("isLog", true);
		// 获取redirect信息
		var redirect = location.state.redirect || "/";
		// 如果没有拿到就跳转到首页
		history.push(redirect);
	}
	return <div>
		<h1>登录</h1>
		<button onClick={logIt}>登录</button>
	</div>
}

// 404 页面
function NoMatch({ location }) {
	return (<div>
		<h3>404</h3>
		<p>当前地址找不到: {location.pathname}</p>
		<NavLink to="/">首页</NavLink>
	</div>)
}

function Admin() {
	return <div>
		<h1>Admin页面</h1>
		<p><NavLink to="/admin/dash">概览</NavLink> |<NavLink to="/admin/orderlist">订单列表</NavLink> </p>
		<Route path="/admin/dash" component={Dash}></Route>
		<Route path="/admin/orderlist" component={OrderList}></Route>
		<Redirect from='/admin' to="/admin/dash"></Redirect>
	</div>
}
function Dash() {
	return <div>
		<h2>概览页面</h2>
	</div>
}
function OrderList() {
	return <div>
		<h2>订单列表页面</h2>
	</div>
}

function Details({ match, location }) {
	return (<div>
		<h1>详情内容</h1>
		<p>参数：{match.params.id}</p>
		<p>match:{JSON.stringify(match)}</p>
		<p>location:{JSON.stringify(location)}</p>
	</div>);
}
// match 是匹配的路由参数
// path 路径
// url  地址
// isExact是否精确匹配
// params 路由的参数
function Home({ history }) {

	return (<div>
		<h1>首页内容</h1>
		<button onClick={history.goBack}>返回</button>
	</div>);
}
// 不同NavLink跳转到首页
function About({ match, history, location }) {

	return (<div>
		<h1>关于内容</h1>

		<button onClick={() => history.push('/')}>首页</button>
		<button onClick={() => history.replace('/')}>首页-replace</button>
		<button onClick={() => console.log(history)}>输出历史记录</button>
		<NavLink to={{
			pathname: "/details/abc",
			search: "name=mumu&age=18",
			hash: "good",
			state: { reidrect: "/about" }
		}}>详情abc</NavLink>

	</div>);
}

在Ant Design的Layout布局组件中加上路由

Admin.js

// 导入css文件
import "./css/Admin.css";

// 导入dash orderlist
import CityList from "./CityList";
import OrderList from "./OrderList";

// 导入路由所需
import { HashRouter as Router, Route, NavLink, Redirect, Switch } from 'react-router-dom'

// 导入react和component
import React, { Component } from 'react';

// 导入布局layout需要的
import { Layout, Menu, Breadcrumb } from 'antd';
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    UserOutlined,
    VideoCameraOutlined,
    UploadOutlined,
} from '@ant-design/icons';

// layout 自带的定义
const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;

class Admin extends Component {
    state = {
        collapsed: false,
    };

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

    render() {
        return (
            <Layout id="myLayout">
                <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
                    <div className="logo">单车管理系统</div>
                    <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                        <Menu.Item key="1" icon={<UserOutlined />}>
                            首页
                        </Menu.Item>
                        <SubMenu key="sub1" icon={<UserOutlined />} title="关于我们">
                            <Menu.Item key="3">企业文化</Menu.Item>
                            <Menu.Item key="4">团队介绍</Menu.Item>
                        </SubMenu>
                        <Menu.Item key="5" icon={<UploadOutlined />}>
                            <NavLink to="/admin/citylist">城市管理</NavLink>
                        </Menu.Item>
                        <Menu.Item key="6" icon={<UploadOutlined />}>
                            <NavLink to="/admin/orderlist">订单管理</NavLink>
                        </Menu.Item>
                        <Menu.Item key="7" icon={<UploadOutlined />}>
                            上下文
                        </Menu.Item>
                        <Menu.Item key="8" icon={<UploadOutlined />}>
                            评论
                        </Menu.Item>
                    </Menu>
                </Sider>
                <Layout className="site-layout">
                    <Header className="site-layout-background" style={{ padding: 0 }}>
                        {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                            className: 'trigger',
                            onClick: this.toggle,
                        })}
                    </Header>
                    <Breadcrumb style={{ margin: '16px' }}>
                        <Breadcrumb.Item>Admin</Breadcrumb.Item>
                        <Breadcrumb.Item>OrderList</Breadcrumb.Item>
                    </Breadcrumb>
                    <Content
                        className="site-layout-background"
                        style={{
                            margin: '0 16px 24px 16px',
                            padding: 24,
                        }}
                    >
                        <Route path="/admin/citylist" component={CityList}></Route>
                        <Route path="/admin/orderlist" component={OrderList}></Route>
                    </Content>
                </Layout>
            </Layout>
        );
    }
}

export default Admin;

OrderList.js

import React, { useState, useEffect } from 'react';


// 导入表格
import { Table } from 'antd';

import axios from 'axios';

function OrderList() {
    const { Column } = Table;

    const [MyData, setMyData] = useState();

    // 获取订单管理数据
    useEffect(() => {
        axios.get('/order/list').then(res => {
            setMyData(res.data.result.item_list)
            console.log(MyData, 'mockjs');
        })
    }, [])

    console.log(MyData);
    return (
        <div>
            <h1>订单管理</h1>
            <Table dataSource={MyData}>
                <Column title="订单编号" dataIndex="order_sn" key="order_sn" />
                <Column title="车辆编号" dataIndex="bike_sn" key="bike_sn" />
                <Column title="用户名" dataIndex="user_name" key="user_name" />
                <Column title="手机号" dataIndex="mobile" key="mobile" />
                <Column title="里程" dataIndex="distance" key="distance" />
                <Column title="行驶时长" dataIndex="total_time" key="total_time" />
                <Column title="状态" dataIndex="status" key="status" />
                {/* <Column title="状态" dataIndex="status" key="status" /> */}
                <Column title="开始时间" dataIndex="start_time" key="start_time" />
                <Column title="结束时间" dataIndex="end_time" key="end_time" />
                <Column title="订单金额" dataIndex="total_fee" key="total_fee" />
                <Column title="实付金额" dataIndex="user_pay" key="user_pay" />
            </Table>
        </div>
    );
}

export default OrderList;

CityList.js

// 导入按钮 表格
import { Button, Table } from 'antd';

import React, { useState, useEffect } from 'react';

// 导入axios
import axios from 'axios';


function CityList() {

    const { Column } = Table;

    const [MyData, setMyData] = useState();

    // 获取订单管理数据
    useEffect(() => {
        axios.get('/open_city').then(res => {
            setMyData(res.data.result.item_list)
            console.log(MyData, 'mockjs');
        })
    }, [])

    console.log(MyData);


    return (
        <div>
            <Button type="primary">开通城市</Button>
            <Table dataSource={MyData}>
                <Column title="城市ID" dataIndex="id" key="id" />
                <Column title="城市名称" dataIndex="name" key="name" />
                <Column title="用车模式" dataIndex="op_mode" key="op_mode" />
                <Column title="营运模式" dataIndex="mode" key="mode" />
                <Column title="授权加盟商" dataIndex="franchisee_name" key="franchisee_name" />
                <Column title="城市管理员" dataIndex="sys_user_name" key="sys_user_name" />
                <Column title="城市开通时间" dataIndex="update_time" key="update_time" />
            </Table>
        </div>
    );
}

export default CityList;