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

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();

应用程序.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;

测试.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，但没有奏效。我在这里想念什么？

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

这是源代码树。

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

标签： reactjsreact-routerreact-router-dom

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