javascript - React Router 在点击卡片后创建一个“新页面”

Question

任何人都可以帮助我使用 React Router

在有人点击我的项目卡后，我试图创建一个“新页面”（包含项目详细信息），但我无法做到这一点我一直在寻找解决方案，但我不想创建一个新按钮来处理这些更改. 这是我的代码：

import React from "react";
import data from "../data";
import Proj from "./proj";
import {
  BrowserRouter as Router,
  Route,
  Link,
  useParams,
} from "react-router-dom";
import ProjectDetails from "./projectsDetail";

//do something...
function Projects(props) {
  function Child() {
    // We can use the `useParams` hook here to access
    // the dynamic pieces of the URL.
    let { id } = useParams();

    return (
      <div>
        <h3>ID: {id}</h3>
      </div>
    );
  }
  return (
    <div>
      <div className="projects">
        <div className="">
          {data.map((item, i) => {
            return (
              <div key={i}>
                <Router>
                  <Link to={`/${item.name}`}>
                    <Proj
                      key={i}
                      name={item.name}
                      details={item.details}
                      img={item.img}
                    />
                  </Link>

                  <Route
                    path="/:id"
                    children={<ProjectDetails id={item.id} name={item.name} />}
                  />
                </Router>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

export default Projects; 

我得到了新的 url，但它不在新的 Page 中。它只是出现在同一页面上

标签： javascriptreactjsreact-router