Ken428965 2022-09-05 19:49 采纳率: 53.6%
浏览 25
已结题

使用react,TabBar导航栏里首页里的内容没有显示出来

以下是所写的代码:

import React from 'react';
import { NavBar, TabBar } from 'antd-mobile';
import { Route, Routes, useLocation, useNavigate, MemoryRouter as Router, } from 'react-router-dom';
import { SmileOutline, MessageOutline, KeyOutline, UserOutline, } from 'antd-mobile-icons';
import styles from '../../pages/Home/demo2.less';
import Home from '../Home/index.js'
const Bottom = () => {
    const navigate = useNavigate();
    const location = useLocation();
    const { pathname } = location;
    const setRouteActive = (value) => {
        navigate(value);
    };
    const tabs = [
        {
            key: '/home',
            title: '首页',
            icon: <SmileOutline />,
        },
        {
            key: '/home/houselist',
            title: '找房',
            icon: <KeyOutline />,
        },
        {
            key: '/home/news',
            title: '资讯',
            icon: <MessageOutline />,
        },
        {
            key: '/home/profile',
            title: '我的',
            icon: <UserOutline />,
        },
    ];
    return (<TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
      {tabs.map(item => (<TabBar.Item key={item.key} icon={item.icon} title={item.title}/>))}
    </TabBar>);
};
export default () => {
    return (
    // <Router initialEntries={['/homepage']}>{
      <div className={styles.app}>
        <div className={styles.top}>
          <NavBar>配合路由使用</NavBar>
        </div>
        <div className={styles.body}>
          <Routes>
            <Route exact path='home' element={<Homepage />} />
            <Route exact path='houselist' element={<Houselist />} />
            <Route exact path='news' element={<News />} />
            <Route exact path='profile' element={<Profile />} />
          </Routes>
        </div>
        <div className={styles.bottom}>
          <Bottom />
        </div>
      </div>
    //   }
    // </Router>
    );
};
function Homepage() {
    return <div>这是首页</div>;
}
function Houselist() {
    return <div>这是房源列表</div>;
}
function News() {
    return <div>这是资讯</div>;
}
function Profile() {
    return <div>这是我的资料</div>;
}

chrome浏览器界面里点击底部导航栏“首页”后显示如下(首页页面内部没有内容显示出来):

img

但点击其余三项(“找房”、“资讯”、“我的”)则有相应的内容显示出来,如下三图:

img

img

img

请问“首页”里的内容显示不出来的原因是什么?如何解决?

  • 写回答

1条回答 默认 最新

  • 崽崽的谷雨 2022-09-06 09:07
    关注

    你说的效果不对吧。我复制到我这里 除了首页其它都不显示 。其实不显示 无非就是 路由 配置的问题 。path不匹配

    
    // import React, { Component, useState,useEffect } from 'react';
    // import { BrowserRouter as Router, Routes, Route, Link, useNavigate } from "react-router-dom";
    // import { Badge, TabBar } from 'antd-mobile';
    // import {
    //     AppOutline,
    //     MessageOutline,
    //     MessageFill,
    //     UnorderedListOutline,
    //     UserOutline,
    // } from 'antd-mobile-icons'
    // function V(){
    //     return "首页";
    // }
    // function Child(props) {
    //     let { activeKey } = props;
    //     if (activeKey == "home") { 
    //         //按照你的写法 就是 return <Home />;
    //         return  <V/>;
    //     }else if(activeKey=="todo"){
    //         return "我的待办"
    //     }else if(activeKey=="message"){
    //         return "我的消息"
    //     }else{
    //         return "个人中心"
    //     }
    // }
    
    // function Home() {
    //     const navigate = useNavigate();
    //     const [activeKey, setActiveKey] = useState("home");
    //     const tabChange = (key) => {
    //         setActiveKey(key);
    //         navigate(key)
    //     }
       
    //     const tabs = [
    //         {
    //             key: 'home',
    //             title: '首页',
    //             icon: <AppOutline />,
    //             badge: Badge.dot,
    //         },
    //         {
    //             key: 'todo',
    //             title: '我的待办',
    //             icon: <UnorderedListOutline />,
    //             badge: '5',
    //         },
    //         {
    //             key: 'message',
    //             title: '我的消息',
    //             icon: (active) =>
    //                 active ? <MessageFill /> : <MessageOutline />,
    //             badge: '99+',
    //         },
    //         {
    //             key: 'personalCenter',
    //             title: '个人中心',
    //             icon: <UserOutline />,
    //         },
    //     ]
    
    //     return (
    //         <div>
    //             {/* 这个也可以循环出来 */}
    //             <Routes>
    //                 {/* <Route path='/' element={"首页"}></Route> */}
    //                 <Route path='/home' element={<V/>}></Route>
    //                 <Route path='/todo' element={"我的代办"}></Route>
    //                 <Route path='/message' element={"我的消息"}></Route>
    //                 <Route path='/personalCenter' element={"个人中心"}></Route>
    //             </Routes>
    //             <Child activeKey={activeKey} />
    //             <TabBar onChange={tabChange} activeKey={activeKey}>
    //                 {tabs.map(item => (
    //                     <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
    //                 ))}
    //             </TabBar>
    
    //         </div>
    //     );
    
    // }
    
    // export default Home;
    
    import React from 'react';
    import { NavBar, TabBar } from 'antd-mobile';
    import { Route, Routes, useLocation, useNavigate, MemoryRouter as Router, } from 'react-router-dom';
    import { SmileOutline, MessageOutline, KeyOutline, UserOutline, } from 'antd-mobile-icons';
    // import styles from '../../pages/Home/demo2.less';
    // import Home from '../Home/index.js'
    const Bottom = () => {
        const navigate = useNavigate();
        const location = useLocation();
        const { pathname } = location;
        const setRouteActive = (value) => {
            navigate(value);
        };
        const tabs = [
            {
                key: '/home',
                title: '首页',
                icon: <SmileOutline />,
            },
            {
                key: '/home/houselist',
                title: '找房',
                icon: <KeyOutline />,
            },
            {
                key: '/home/news',
                title: '资讯',
                icon: <MessageOutline />,
            },
            {
                key: '/home/profile',
                title: '我的',
                icon: <UserOutline />,
            },
        ];
        return (<TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
          {tabs.map(item => (<TabBar.Item key={item.key} icon={item.icon} title={item.title}/>))}
        </TabBar>);
    };
    export default () => {
        return (
        // <Router initialEntries={['/homepage']}>{
          <div >
            <div >
              <NavBar>配合路由使用</NavBar>
            </div>
            <div >
              <Routes>
              <Route exact path='/' element={<Homepage />} />
                <Route exact path='/home' element={<Homepage />} />
                <Route exact path='/home/houselist' element={<Houselist />} />
                <Route exact path='/home/news' element={<News />} />
                <Route exact path='/home/profile' element={<Profile />} />
              </Routes>
            </div>
            <div >
              <Bottom />
            </div>
          </div>
        //   }
        // </Router>
        );
    };
    function Homepage() {
        return <div>这是首页</div>;
    }
    function Houselist() {
        return <div>这是房源列表</div>;
    }
    function News() {
        return <div>这是资讯</div>;
    }
    function Profile() {
        return <div>这是我的资料</div>;
    }
     
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录

报告相同问题?

问题事件

  • 系统已结题 9月14日
  • 已采纳回答 9月6日
  • 创建了问题 9月5日

悬赏问题

  • ¥15 maccms影视模板 制作影视网站失败 求
  • ¥15 stm32按键设置闹钟数进退位不正常
  • ¥15 三电平逆变器中点电位平衡问题
  • ¥20 这怎么写啊 java课设
  • ¥15 用C语言完成一个复杂的游戏
  • ¥15 如何批量更改很多个文件夹里的文件名中包含文件夹名?
  • ¥50 MTK手机模拟HID鼠标出现卡顿
  • ¥20 求下下面这个数据结构代码
  • ¥20 前端 二进制文件流图片转化异常
  • ¥15 github上的这个C语言项目如何跑起来