React Router点击Link无法跳转独立新页面，内容组件页内渲染问题

• 路由层级设计完全错位：把<Router>、<Switch>、<Route>这类全局路由核心组件，直接嵌套在可复用的CardComponent卡片组件内部。卡片组件会在列表页被重复渲染N次，每次渲染都会创建独立的路由上下文，路由匹配成功后，组件渲染的位置就是当前卡片内部的<Switch>标签位置，自然会把详情内容嵌在卡片DOM里，不会形成独立的全屏页面。
• 其他代码冗余/错误：
  • CardComponent中用了原生HTML属性class，不符合React的JSX语法要求，会触发DOM渲染告警
  • <Route>同时配置component属性和嵌套的<Content>子元素，两种路由渲染方式写法冲突，属于冗余代码
  • 书籍详情路径直接拼接书名、作者字符串，没有做URL编码，遇到带空格、特殊符号的文本时会直接导致路由匹配失效
  • 路径没有做层级区分，和应用首页/其他页面的顶层路径存在冲突风险

1. 从CardComponent中完全移除路由相关逻辑 #

CardComponent只保留纯展示功能和跳转链接的功能，不再承担路由注册、路由匹配渲染的职责。修正后的组件代码：

import React from "react";
import "./CardComponent.css";
import { Link } from "react-router-dom";

function CardComponent(props) {
  // 对路径参数做URL编码，避免特殊字符导致匹配失败
  const detailPath = `/book/${encodeURIComponent(`${props.title}-${props.author}`)}`
  return (
    <div className="card">
      <div className="uppercard">
        <img
          className="bookCover"
          src={props.img}
          alt=""
          width="120px"
          height="150px"
        />
        <h3>{props.title}</h3>
        <h6>By {props.author}</h6>
      </div>
      <div className="lowerCard">{props.points}</div>
      <Link to={detailPath}>Read</Link>
    </div>
  );
}

export default CardComponent;

2. 在应用最根层级注册全局路由 #

所有路由规则必须在应用的根组件（一般是src/App.jsx）里统一注册一次，让路由对应的组件直接挂载在全局DOM根节点下，保证路由跳转的内容是独立全屏的，不会嵌套在子组件内部。
示例的根组件代码：

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
// 导入书籍卡片列表页组件
import BookListPage from "./BookListPage";
// 导入书籍详情组件
import Content from "./ContentFolder/Content";

function App() {
  return (
    <Router>
      <Switch>
        {/* 首页：渲染所有书籍卡片 */}
        <Route exact path="/" component={BookListPage} />
        {/* 详情页：匹配单本书籍的独立路径 */}
        <Route path="/book/:bookId" component={Content} />
      </Switch>
    </Router>
  )
}
export default App;

3. 调整Content组件的取值逻辑 #

由于现在详情页是通过路由规则独立渲染的，不再直接接收卡片组件传入的props，需要通过路由参数匹配对应书籍的完整数据，完成内容展示。修正后的Content组件代码：

import React from "react";
import { useParams } from "react-router-dom";
import Mynavbar from "../Partials/Mynavbar";
import MyFooter from "../Partials/Footer";
import { Container } from "react-bootstrap";
// 导入本地存储的全量书籍数据源
import { bookDataList } from "./data/bookList";
import "./Content.css";

function Content() {
  // 从路由参数获取书籍标识
  const { bookId } = useParams();
  // 根据标识匹配对应书籍的完整信息
  const currentBook = bookDataList.find(book => 
    encodeURIComponent(`${book.title}-${book.author}`) === bookId
  )

  // 匹配失败的兜底提示
  if (!currentBook) return <div>未查询到对应书籍信息</div>

  return (
    <div>
      <Mynavbar />
      <Container className="main">
        <h4>{currentBook.title}</h4>
        <h6>By {currentBook.author}</h6>
        <ul>
          {currentBook.points.map((point, idx) => <li key={idx}>{point}</li>)}
        </ul>
      </Container>
      <MyFooter />
    </div>
  );
}
export default Content;

点击任意卡片上的Read链接时，全局路由会匹配对应的书籍详情规则，直接将Content组件渲染在应用根层级的路由出口下，形成独立的全屏页面，不会再嵌套在原来的卡片列表DOM内部。

内容的提问来源于stack exchange，提问作者Ali Qumail