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

Question

以下是所写的代码：

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浏览器界面里点击底部导航栏“首页”后显示如下（首页页面内部没有内容显示出来）：

但点击其余三项（“找房”、“资讯”、“我的”）则有相应的内容显示出来，如下三图：

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

Answer 1

你说的效果不对吧。我复制到我这里 除了首页其它都不显示 。其实不显示 无非就是 路由 配置的问题 。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>;
}