反应路由器 - url 更改，无渲染

Question

使用通过 React 浏览器路由器的简单链接/路由。

我让它可以很好地路由到根组件（ / ），但是当我尝试路由到（ /drink/:drinkId ）时它不会像预期的那样 function ，尽管如果我手动尝试访问 URL 会发生变化并且页面加载它。

应用组件：

import React from "react";
import "./App.css";
import Cocktails from "./Cocktails";
import { Container } from "react-bootstrap";
import NavApp from "./Navbar";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import DrinkDetails from "./DrinkDetails";
import "./App.css";

function App() {
  return (
    <Router>
      <Container className="App-container">
        <NavApp />
        <Switch>
          <Route exact path="/">
            <Cocktails size={20} />
          </Route>
          <Route exact path="/drink/:drinkId">
            <DrinkDetails />
          </Route>
        </Switch>
      </Container>
    </Router>
  );
}

export default App;

饮品详情组件：

import { React, useState, useEffect } from "react";
import { Jumbotron, Button } from "react-bootstrap";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams,
} from "react-router-dom";
import axios from "axios";

function DrinkDetails() {
  let { drinkId } = useParams();
  const [drink, setDrink] = useState(null);
  const [ingrdts, setIngrdts] = useState([]);

  useEffect(() => {
    const getDrinkSpecs = async () => {
      const res = await axios.get(
        `https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=${drinkId}`
      );
      let newDrink = res.data.drinks[0];
      setDrink(newDrink);
      let newIngrdts = [];
      for (let i = 1; i <= 15; i++) {
        if (newDrink[`strIngredient${i}`] != null) {
          let ingrdtVal = {};
          ingrdtVal["ing"] = newDrink[`strIngredient${i}`];
          ingrdtVal["val"] = newDrink[`strMeasure${i}`];
          newIngrdts.push(ingrdtVal);
        }
      }
      setIngrdts([...newIngrdts]);
    };
    getDrinkSpecs();
  }, [drinkId]);

  return drink ? (
    <Jumbotron>
      <h1>
        {drink.strDrink}
        <img src={drink.strDrinkThumb} />
      </h1>
      <p>Glass: {drink.strGlass}</p>
      <p>Category: {drink.strCategory}</p>
      <p>Instructions: {drink.strInstructions}</p>
      {ingrdts.map((ingrdt) => (
        <p>
          {ingrdt.ing} : {ingrdt.val}
        </p>
      ))}
      <p>
        <Button variant="primary">Learn more</Button>
      </p>
    </Jumbotron>
  ) : (
    <Jumbotron>
      <h1>Hmmm... we don't have this yet!</h1>
      <p>
        This is a simple hero unit, a simple jumbotron-style component for
        calling extra attention to featured content or information.
      </p>
      <p>
        <Button variant="primary">Learn more</Button>
      </p>
    </Jumbotron>
  );
}

export default DrinkDetails;

这就是我使用Link的地方：

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

function CardDrink({ data, select }) {
  return (
    <Router>
      <Card className="Cocktail-card">
        <Link to={`/drink/${data.idDrink}`}>
          <Card.Img
            variant="top"
            src={data.strDrinkThumb}
            className="Cocktail-card-img"
            onClick={() => select(data.idDrink)}
          />
        </Link>
        <Card.Body>
          <Card.Title>{data.strDrink}</Card.Title>
        </Card.Body>
      </Card>
    </Router>
  );
}

export default CardDrink;

Answer 1

从CardDrink组件中移除<Router> 。 您只需要一个在App组件中已有的根级别Router 。

此外，作为一种做法，不要在组件中保留未使用的导入。 我也看到在DrinkDetails组件中导入了Router 。

来自 文档

要使用路由器，只需确保它呈现在元素层次结构的根部。 通常，您会将顶级元素包装在路由器中。

Answer 2

尝试使用useHistory()钩子：

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

function CardDrink({ data, select }) {
const history = useHistory() 
  return (
    <Router>
      <Card className="Cocktail-card">
        <div onClick={()=>history.push(`/drink/${data.idDrink}`)}>
          <Card.Img
            variant="top"
            src={data.strDrinkThumb}
            className="Cocktail-card-img"
            onClick={() => select(data.idDrink)}
          />
        </div>
        <Card.Body>
          <Card.Title>{data.strDrink}</Card.Title>
        </Card.Body>
      </Card>
    </Router>
  );
}

export default CardDrink;