Перейдите на страницу в подпапке по щелчку элемента в React JS

Я думаю, вам нужно сначала узнать концепцию React Router, чтобы проверить, как перемещаться по маршрутам между компонентами. React использует React Router Dom для навигации по страницам. Итак, сначала вам нужно создать все маршруты в своих проектах (назовите их App.jsx или вы можете создать свой собственный файл Route.jsx и импортировать его в App.jsx).

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Work = lazy(() => import('./pages/Work'));
const EcoPizzaCaseStudy = lazy(() => import('./case-studies/eco-pizza/EcoPizzaCaseStudy'));
const SquaredCaseStudy = lazy(() => import('./case-studies/squared/SquaredCaseStudy'));

const App = () => (
  <Router>
    <Suspense fallback = {<div>Loading...</div>}>
      <Routes>
        <Route path = "/work" element = {<Home />} />
        <Route path = "/coPizzaCaseStudy/" element = {<EcoPizzaCaseStudy />} />
        <Route path = "/squaredCaseStudy/" element = {<SquaredCaseStudy />} />
      </Routes>
    </Suspense>
  </Router>
);

Таким образом, вы можете передавать URL-адреса coPizzaCaseStudy и squaredCaseStudy в свои рабочие данные вместо передачи самих компонентов. Вам не нужно импортировать компоненты в файл WorkData.jsx, просто используйте приведенные выше тексты в свойстве url.

А также, по моему личному мнению, относительно структурирования вашего проекта, вы можете создать подпапки внутри папки страниц для соответствующих файлов каждой страницы (например, создать рабочую папку и поместить свои файлы Work.css ~ WorkData.jsx), и вместо Work.jsx вы можно просто иметь index.jsx и скопировать весь код из Work.jsx. Таким образом, механизм компиляции веб-пакета поможет вам легче найти правильный индекс для ваших страниц (в данном случае рабочей страницы). Я поделился структурой папок моего проекта, следуя рекомендациям. Подпапки под представлениями - это все страницы. Каждая папка имеет файл index.tsx для основного компонента, а также подпапки компонента, хуки, типы и т. д.

А также вам нужно назвать WorkData.jsx, если вы собираетесь анализировать только данные объекта, а не компонент JSX. Просто назовите это WorkData.js и т. д.

вам не хватает всей концепции маршрутизации. Вы не можете просто использовать элемент как ссылку на него. Для этого мы используем маршруты, а затем используем URL-адрес по маршруту, определенному соответствующим образом.

Поэтому вам нужно заполнить свои маршруты недостающими элементами в App.js:

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { Navigation } from "./components/Navigation";
import { Home, About, Work, Contact, PageNotFound, UnderConstruction } from "./pages";
import { Footer } from "./components/Footer";
//import required components
import { EcoPizzaCaseStudy, SquaredCaseStudy } from "./case-studies";

function App() {
  return (
    <div className = "App">
      <Router>
        <Navigation />
        <main>
          <Routes>
            <Route path = "/" element = {<Home />} />
            <Route path = "/about" element = {<About />} />
            <Route path = "/work" element = {<Work />} />
            <Route path = "/under-construction" element = {<UnderConstruction />} />
            <Route path = "/contact" element = {<Contact />} />
            // Add your routes
            <Route path = "/eco-pizza-case-study" element = {<EcoPizzaCaseStudy/>} />
            <Route path = "/squared-case-study" element = {<SquaredCaseStudy/>} />
            <Route path='*' element = {<PageNotFound />}/>
          </Routes>
        </main>
        <Footer />
      </Router>
    </div>
  );
}

export default App;

А затем для URL-адреса используйте этот определенный путь.

Вместо этого "url": SquaredCaseStudy просто сделайте "url": "/squared-case-study"

Любой выбранный вами путь будет работать, если он уникален. Вы можете сделать это /study/squared или любым другим, но вам нужно определить его в App.js, чтобы использовать его.

Итак, если я правильно понимаю вашу проблему, то вы щелкаете ссылку, а затем переходите, например, к "/work/EcoPizzaCaseStudy", а затем отображается компонент PageNotFound или возникает какая-то ошибка.

В настоящее время код пытается использовать импортированный компонент React в качестве цели ссылки.

import EcoPizza from "../assets/project-icons/ecoPizza.webp";
import Squared from "../assets/project-icons/Squared.webp";
import { EcoPizzaCaseStudy, SquaredCaseStudy } from "./case-studies";

const WorkData = [
  {
    "image": EcoPizza,
    "name": "The UX portfolio item name",
    "description": "This is description part",
    "role": "My role in that project",
    "url": EcoPizzaCaseStudy // <-- React component, not a path string
  },
  {
    "image": Squared,
    "name": "The UX portfolio item name",
    "description": "This is description part",
    "role": "My role in that project",
    "url": SquaredCaseStudy // <-- React component, not a path string
  }
];

Импортированные компоненты должны отображаться компонентом Route, а ссылка должна указывать строку целевого пути.

Вам нужно будет явно отобразить маршрут для рабочих проектов, на которые вы хотите ссылаться.

Пример:

Обновите рабочие данные, чтобы включить элемент, который вы хотите отобразить на определенном маршруте, а затем установите URL-адрес, по которому вы хотите, чтобы он отображался.

import EcoPizza from "../assets/project-icons/ecoPizza.webp";
import Squared from "../assets/project-icons/Squared.webp";
import { EcoPizzaCaseStudy, SquaredCaseStudy } from "./case-studies";

const WorkData = [
  {
    image: EcoPizza,
    name: "The UX portfolio item name",
    description: "This is description part",
    role: "My role in that project",
    element: <EcoPizzaCaseStudy />, // <-- route element
    path: "eco-pizza", // <-- route path
  },
  {
    image: Squared,
    name: "The UX portfolio item name",
    description: "This is description part",
    role: "My role in that project",
    element: <SquaredCaseStudy />,
    path: "squared",
  }
];

export default WorkData;

Компонент WorkCard будет использовать path для перехода относительно пути "/work", то есть к "/work/eco-pizza".

const Work = () => {
  return (
    <div className = "work">
      <section className = "work-section">
        <div className = "card">
          <h1 className = "underline">My portfolio</h1>
          <p>Here are the case studies of my projects...</p>

          <div className = "grid-layout grid-2">
            {
              WorkData.map((val) => {
                return (
                  <WorkCard
                    key = {val.path}
                    path = {val.path} // <-- path path through
                    image = {val.image}
                    name = {val.name}
                    description = {val.description}
                    role = {val.role}
                  />
                );
              })
            }
          </div>
        </div>
      </section>
    </div>
  );
}

const WorkCard = (props) => {
  return (
    <NavLink to = {props.path} className = "tile-card">
      <img src = {props.image} alt = {props.name} />
      <div className = "details">
        <h2>{props.name}</h2>
        <p className = "description" title = {props.description}>
          {props.description}
        </p>
        <h4 className = "role" title = {props.role}>Role: {props.role}</h4>
      </div>
    </NavLink>
  );
}

Сопоставьте массив WorkData с маршрутами проекта.

...
import WorkData from "./WorkData";
...

function App() {
  return (
    <div className = "App">
      <Router>
        <Navigation />
        <main>
          <Routes>
            <Route path = "/" element = {<Home />} />
            <Route path = "/about" element = {<About />} />
            <Route path = "/work">
              <Route index element = {<Work />} />
              {/* "/work/eco-pizza", "/work/squared", etc... */}
              {WorkData.map(({ path, element }) => (
                <Route key = {path} {...{ path, element }} />
              ))}
            </Route>
            <Route path = "/under-construction" element = {<UnderConstruction />} />
            <Route path = "/contact" element = {<Contact />} />
            <Route path='*' element = {<PageNotFound />}/>
          </Routes>
        </main>
        <Footer />
      </Router>
    </div>
  );
}