萌新提问关于 react 的路由问题?

Question

项目是 Umi 创建的，用的路由插件是 react-router-dom。

有两个页面，第一个页面通过 Link 组件跳转到第二个页面，第二页页面是 router 文件夹里的 router-page，第一个页面的代码如下：

import { Link } from 'umi';

export default function HomePage() {
  return (
    <div>
      <ol style={{ display: 'flex', flexDirection: 'column' }}>
        <li>
          <Link to="/router/router-page">路由</Link>
        </li>
      </ol>
    </div>
  );
}

.umirc 里也的路由也添加好了：

{ path: '/router/router-page', component: 'router/router-page' },

可以成功的从第一页跳转到第二页。

然后第二页 router-page.tsx 里的代码如下：

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

export default class RouterPage extends Component {
  render() {
    return (
      <div style={{ margin: '20px' }}>
        <nav>
          <NavLink to="">首页</NavLink>
          <NavLink to="/about">关于</NavLink>
        </nav>
        <RouterView></RouterView>
      </div>
    );
  }
}

function RouterView() {
  return (
    <Routes>
      <Route path="" element={<Home></Home>}></Route>
      <Route path="/about" element={<About></About>}></Route>
    </Routes>
  );
}

function Home() {
  return (
    <div>
      <h1>首页内容</h1>
    </div>
  );
}

function About() {
  return (
    <div>
      <h1>关于页面内容</h1>
    </div>
  );
}

页面显示如下：

现在的问题是，我点击“关于”按钮，页面直接变白板了，然后控制台提示：

You rendered descendant <Routes> (or called useRoutes()) at "/router/router-page" (under <Route path="/router/router-page">) but the parent route path has no trailing "*". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render.

Please change the parent <Route path="/router/router-page"> to <Route path="/router/router-page/*">.

No routes matched location "/about"

根据它的提示，我去把 Link 改了下：

<Link to="/router/router-page/*">路由</Link>

结果第二个页面全都变白板了。

我是 react 新手，想请教下大家这个问题应该如何解决？

Answer 1

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";
import ReactDOM from 'react-dom/client'

function HomePage() {
  return (
    <div>
      <Link to="/router/router-page">跳转路由页面</Link>
    </div>
  );
}

function RouterPage() {
  return (
    <div>
      <h1>路由页面</h1>
      <Link to='/router/router-page/RouterPageHome'>RouterPageHome</Link>
      <Link to='/router/router-page/RouterPageAbout'>RouterPageAbout</Link>
      <Routes>
        <Route path="RouterPageHome" element={<div>路由页面Home</div>}></Route>
        <Route path="RouterPageAbout" element={<div>路由页面About</div>}></Route>
      </Routes>
    </div>
  );
}

function App() {
  return (
    <div>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<HomePage />}></Route>
          <Route path="/router/router-page/*" element={<RouterPage />} />
        </Routes>
      </BrowserRouter>
    </div> 
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />)