React-Router 路由渲染不出来页面

Question

这是代码

import React, { useState } from 'react';
import { Layout, Menu } from 'antd';
import './index.css';
import "antd/dist/antd.css";
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    AreaChartOutlined,
    VideoCameraOutlined,
    UploadOutlined,
  } from '@ant-design/icons';
import {
    Link,
    Route,
    Routes,
} from "react-router-dom";
import Three from '../Three/index'
import Nav1 from '../nav1/index';
import Nav2 from '../nav2/index';

const { Header, Sider, Content } = Layout;

function Home() {
    const [collapsed, changeCollapsed] = useState(false);
    const toggle = () => {
        changeCollapsed(!collapsed)
    };
    return (
        <Layout style={{height: '100vh'}}>
            <Sider trigger={null} collapsible collapsed={collapsed}>
                <div className="logo" />
                <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
                    <Menu.Item key="1" icon={<AreaChartOutlined />}>
                        <Link to='/home/three'>three.js</Link>
                    </Menu.Item>
                    <Menu.Item key="2" icon={<VideoCameraOutlined />}>
                        <Link to='/home/nav1'>nav1</Link>
                    </Menu.Item>
                    <Menu.Item key="3" icon={<UploadOutlined />}>
                        <Link to='/home/nav2'>nav2</Link>
                    </Menu.Item>
                </Menu>
            </Sider>
            <Layout className="site-layout">
                <Header className="site-layout-background" style={{ padding: 0 }}>
                    {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                    className: 'trigger',
                    onClick: toggle,
                    })}
                </Header>
                <Content
                    className="site-layout-background"
                    style={{
                    margin: '24px 16px',
                    padding: 24,
                    minHeight: 280,
                    }}
                >
                  <Routes>
                          <Route path="/home/three" element={<Three />}/>
                          <Route path="/home/nav1" element={<Three />}/>
                          <Route path="/home/nav2" element={<Three />}/>
                  </Routes>
                </Content>
            </Layout>
        </Layout>
    )
}

export default Home;

import React from 'react';
import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";
import Login from './views/index';
import Home from './views/Home/index'
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Login />} />
        <Route path="/home/*" element={<Home />} />
      </Routes>
    </BrowserRouter>
  )
}
export default App

我在home组件下，又重新设置了一些路由，但是这个路由不报错，但是不显示。求解决？

Answer 1

看下 react-router-dom v6 relative-routes-and-links 例子

App.tsx:

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './Home';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<div>login</div>} />
        <Route path="/home/*" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Home.tsx:

import { Route, Routes } from 'react-router-dom';

function Home() {
  return (
    <div style={{ height: '100vh' }}>
      <header>home</header>
      <div
        style={{
          margin: '24px 16px',
          padding: 24,
          minHeight: 280,
        }}
      >
        <Routes>
          <Route path="three" element={<div>three</div>} />
          <Route path="nav1" element={<div>nav1</div>} />
          <Route path="nav2" element={<div>nav2</div>} />
        </Routes>
      </div>
    </div>
  );
}

export default Home;

页面

stackblitz