在 react-routing 上渲染一个新页面，但它会在当前页面内渲染它

Question

这会显示一个卡片组件，如果用户单击<Link>read</Link>，它应该会重新呈现一个新页面。

import React from "react";
import { Button } from "react-bootstrap";
import "./CardComponent.css";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Content from "./ContentFolder/Content";

function CardComponent(props) {
  return (
    <Router>
      <div class="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={"/" + props.title + props.author}>Read</Link>
      </div>
      <Switch>
        <Route
          exact
          path={`/${props.title+props.author}`}
          component={Content}
        >
          <Content title={props.title} author={props.author}
            points={props.points}
          />
          
        </Route>
      </Switch>
    </Router>
  );
}

export default CardComponent;

点击阅读时，我想在不同的页面上呈现这个内容组件。

总之，目标是当用户点击其中一个卡片组件时，在新页面上显示所有信息。

import React from "react";
import Mynavbar from "../Partials/Mynavbar";
import MyFooter from "../Partials/Footer";
import { Container } from "react-bootstrap";
import "./Content.css";

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

Answer 1

问题：Router 在CardComponent 内部

Router 需要存在于App 的最高级别。 Router 内部和Switch 外部的所有内容都将在每个页面上呈现。所以现在你的卡代码甚至会出现在Content 路线上。我们希望Card 和Content 分开Routes。

问题：不明确的 URL 结构

您需要让您的网址看起来像"/${props.title+props.author}" 吗？这是一个非常糟糕的结构，因为您不可能从 URL 向后工作到内容。 "/Harry PotterJ.K. Rowling" 的内容是什么？哪一部分是标题，哪一部分是作者？没有分隔符所以你不知道。您必须遍历所有书籍的列表，加入它们的标题和作者，并将其与您的字符串进行比较。

典型的 URL 将基于 id，例如 "/book/5"。我在这里没有看到任何关于 id 的提及，因此我们可以使用 title。

解决方案

应用路由可能如下所示：

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/book/:title" component={BookDetails}/>
        <Route path="/" component={BookList}/>
      </Switch>
    </Router>
  )
}

让我们摆脱@​​987654337@ 中的所有路由，让它只显示带有图书详细信息链接的图书卡片。

function CardComponent(props: Book) {
  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={"/book/" + props.title}>Read</Link>
    </div>
  );
}

我们的主页可能会显示这些卡片的列表。

function BookList() {
  // get books from somewhere -- a database? a json file?
  const books = ???;

  return (
    <ul className="bookList">
      {books.map((book) => (
        <CardComponent {...book} key={book.title} />
      ))}
    </ul>
  );
}

BookDetails 是一个单独的路由，所以我们需要从 URL 中获取图书。

function BookDetails(props: RouteComponentProps) {
  // get the title from the URL
  // is automatically encoded and needs to be decoded
  const title = decodeURIComponent(props.match.params.title);
  // find the book object from your data source
  const book = ???
  // from a JSON array: BOOKS.find(book => book.title.toLowerCase() === title.toLowerCase() );

  // redirect to error page if no matching book
  if ( ! book ) {
    return <Redirect to="/404" />
  }

  // can render your Content component, but only after we get the book
  return (
    <Content {...book} />
  )
}