为什么我的链接在React-Router中不起作用？

Question

试图为网站创建一个关于IM的网站的页面，我在堆栈上找到了此解决方案，但对我不起作用。我正在为原始代码使用过时的教程，这是我当前的代码：

about.js ：

import React from "react";
import { Link, Route, useMatch } from "react-router-dom";
import SinglePage from "./SinglePage";

const About = () => {
    //const match = useMatch('/');
    return (
    <div className="about__content">
      <ul className="about__list">
        <li>
          <Link to={'about-app'}>About App</Link>
        </li>
        <li>
          <Link to={'about-author'}>About Author</Link>
        </li>
      </ul>
      <Route path={':slug'}>
        <SinglePage />
      </Route>
    </div>
  );
};

export default About;

index.js 我正在呈现组件：

import React from "react";
import ReactDOM from "react-dom";
import TodoContainer from "./functionBased/components/TodoContainer"; // Component file
import "./functionBased/App.css"; // Style sheet
import { HashRouter as Router, Routes, Route } from "react-router-dom"; // Router file
import About from "./functionBased/pages/About";
import NotMatch from "./functionBased/pages/NotMatch";

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <Routes>
        <Route exact path="/" element={<TodoContainer />} />
        <Route path="/about/*" element={<About />} />
        <Route path="*" element={<NotMatch />} />
      </Routes>
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);

Answer 1

问题

1. 关于组件的直接渲染路由组件。 路由组件只能由路由组件或其他路由组件作为嵌套路由。
2. react-router-dom@6 路由组件在 element prop上渲染其内容。

解决方案

• 导入路由组件，并包装douscentent 路由由`左右呈现的组件。
• 在路由的元素 prop上渲染单页。

示例：

import React from "react";
import { Link, Routes, Route } from "react-router-dom";
import SinglePage from "./SinglePage";

const About = () => {
  return (
    <div className="about__content">
      <ul className="about__list">
        <li>
          <Link to="about-app">About App</Link>
        </li>
        <li>
          <Link to="about-author">About Author</Link>
        </li>
      </ul>
      <Routes>
        <Route path=":slug" element={<SinglePage />} />
      </Routes>
    </div>
  );
};

export default About;

替代方案

，您可以将单页移动作为嵌套路由（而不是作为后裔的位置）移动到主路由器路线）。

示例：

import React from "react";
import { Link, Outlet } from "react-router-dom";
import SinglePage from "./SinglePage";

const About = () => {
  return (
    <div className="about__content">
      <ul className="about__list">
        <li>
          <Link to="about-app">About App</Link>
        </li>
        <li>
          <Link to="about-author">About Author</Link>
        </li>
      </ul>
      <Outlet />
    </div>
  );
};

export default About;

...

<Router>
  <Routes>
    <Route path="/" element={<TodoContainer />} />
    <Route path="/about" element={<About />}>
      <Route path=":slug" element={<SinglePage />} />
    </Route>
    <Route path="*" element={<NotMatch />} />
  </Routes>
</Router>

Answer 2

您正在用/about/*定义路由，并使用 of tosemething 访问它们，该路由根本不存在，添加 \ of of \ auter 在 to 链接中。