前端 - 萌新提问关于 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 />)

Answer 2

根据你的描述，问题可能出在 RouterView 的定义上。在 RouterView 中，你正在渲染 Home 和 About 组件，但它们的路径似乎不匹配。在 React Router v6 中，你需要在 <Route> 组件上设置 element 属性，而不是直接渲染组件。

你的 RouterView 应该像这样修改：

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

这将确保只有当路径为 "/router/router-page" 或 "/router/router-page/about" 时，Home 和 About 组件才会被渲染。如果路径不匹配这些，React Router 将选择其他匹配的组件。

然后，你的 Link 组件应该像这样修改：

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

现在，当你点击“关于”按钮时，React Router 将匹配正确的路由，并渲染正确的组件。