在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;

单击read后，我希望在不同的页面上呈现此内容组件。

总而言之，目标是当用户单击某个卡片组件时，在新页面上显示所有信息。

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

问题：CardComponent内部的Router

Router需要存在于App的最高级别。Router内部和Switch外部的所有内容都将呈现在每个页面上。因此，现在您的卡代码将显示在Content路线上。我们希望Card和Content是独立的Route。

问题: URL结构不明确

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

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

解决方案

应用路由可能如下所示：

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

让我们去掉CardComponent中的所有路由，让它只显示一本书的卡片，并带有指向该书详细信息的链接。

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} />
  )
}