反应：网址改变，但页面永远不会移动

Question

就像标题一样，当我单击其中一项时，URL 会发生变化，但页面不会改变，只会显示相同的页面。

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import { BrowserRouter } from "react-router-dom";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

reportWebVitals();

App.js

import axios from "axios";

import React, { useEffect, useState } from "react";
import { Routes, Route } from "react-router-dom";

import ListItem from "./components/ListItem";

function App() {
  const [data, setData] = useState([]);

  return (
    <div className="App">

       // Here I am using Routes
       <Routes>
         <Route
          path="/test"
          element={data.map((list) => (
            <ListItem key={list.id} {...list} />
          ))}
         ></Route>
       </Routes>
    
    </div>
  );
}

export default App;

Test.js

import React from "react";

const Test = () => {
  return (
    <div>
      <p>Test</p>
    </div>
  );
};

export default Test;

数据

{
  id: recipe_id
  category: String 
  cookingSteps: [String] 
  cookingTime: Int 
  description: String 
  ingredients: [String] 
  kcal: Int
  name: String 
  servings: Int 
  spices: [String] 
  picture: String
}

我也尝试过useNavigate，但没有成功。我在这里错过了什么？

我编辑了这个问题，因为它有些模糊。

这是源代码树。

你能让我知道我应该解决什么问题吗？

Answer 1

为了响应 URL 的变化呈现不同的内容，您还需要将组件呈现为与每个路径匹配的 Route 组件。

示例应用：

import React, { useEffect, useState } from "react";
import { Link, Routes, Route } from "react-router-dom";

import ListItem from "./components/ListItem";
import About from "./components/About";
import Test from "./components/Test";

function App() {
  const [data, setData] = useState([]);

  return (
    <div className="App">

      /* Links for navigation */
      {data.map((list) => (
        // url changes here, but page got stuck in this App page
        <Link to="/test" key={list.id}>
          <ListItem {...list} />
        </Link>
      ))}

      /* Routes for rendering content */
      <Routes>
        <Route path="/about" element={<About />} />
        <Route path="/test" element={<Test />} />
      </Routes>
    </div>
  );
}

演示

const About = () => <h1>About</h1>;
const Test = () => {
  return (
    <div>
      <p>Test</p>
    </div>
  );
};

export default function App() {
  return (
    <div className="App">
      <ul>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/test">Test</Link>
        </li>
      </ul>
      <Routes>
        <Route path="/about" element={<About />} />
        <Route path="/test" element={<Test />} />
      </Routes>
    </div>
  );
}

Answer 2

Route 组件渲染第一个匹配当前 URL 的，因为它总是匹配 home '/' 它会渲染第一个页面。 -> 将 'exact' 添加到您的 Route 组件，它将呈现与当前 URL 匹配的确切 URL

import { Switch, Route } from "react-router-dom";
function App() {

    return (
     <>
       <div className="App">

         <Link to="/test">
           <ListItem />
         </Link>
      </div>
      <Switch>
         <Route exact path='/' />
         <Route path='/test' />
      </Switch>
   </>
   );
   }

export default App;