Javascript 在单独的页面上反应路由器呈现组件

我开始了我的第一个React项目，想自己建立我的设计组合。因此，这也是我第一次使用React路由器，或者尝试通过单击按钮将组件相互组合

我想在App.js中呈现所有标准组件，并且只想用一个按钮将我的项目链接到描述项目页面。因此，如果用户单击按钮，他们将链接到此项目的描述。 但令人惊讶的是，它不起作用。我现在的问题是，描述页面与标准组件（如“About、Navbar、Contact”）在同一页面中呈现。但是我希望项目的描述页面在一个单独的页面中呈现。这项工作我能做什么

我想这是我的相关代码来理解我到目前为止所做的。但是如果你需要更多的片段，请说出来。：）

App.js
从“React”导入React，{useState，useRef}；
从“./components/Navbar”导入Navbar；
从“./components/Footer”导入页脚；
从“./components/Contact”导入联系人；
从“/components/Hero”导入Hero；
从“./components/About”导入关于；
从“./组件/卡”导入卡；
从“./components/Sidebar”导入侧栏；
从“./组件/项目”导入项目；
从“./components/ProjectPath”导入项目路径；
从“/pages/Smartdress”导入Smartdress；
从“./pages/Nazzle”导入Nazzle；
从“./pages/Storyline”导入故事线；
从“./pages/Hel”导入Hel；
从“/pages/Songstories”导入歌曲故事；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route}；
函数App（）{
返回(
);
}
导出默认应用程序；

注意：/pages/Smartdress->是对项目的描述

Projects.js
import React, { useState } from 'react';
import CardItems from './CardItems';
import nazzle from '../assets/nazzle.png';
import smartdress from '../assets/smartdress.png';
import storyline from '../assets/2.png';
import hel from '../assets/hel.png';

import Nazzle from '../pages/Nazzle';
import Smartdress from '../pages/Smartdress';
import Hel from '../pages/Hel';
import Storyline from '../pages/Storyline';
import Songstories from '../pages/Songstories';

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useRouteMatch,
  useParams,
} from 'react-router-dom';

function Projects() {
  return (
    <div id='projects' className='container mx-auto'>
      <h1 className='line absolute ml-8 -mt-2 z-0 text-xl'>Projects</h1>

      <CardItems
        bg='bg-smartdress'
        text='Smartdress'
        subtitle='Project (Studium)'
        description='Spielerisch die Natur erkunden und
spannende Rätsel mit Augmented
Reality lösen'
        src={smartdress}
        link='/project/smartdress'
      />

      <CardItems
        bg='bg-nazzle'
        text='Nazzle'
        subtitle='Project (Studium)'
        description='Spielerisch die Natur erkunden und
spannende Rätsel mit Augmented
Reality lösen'
        src={nazzle}
        link='/project/nazzle'
      />

      <CardItems
        bg='bg-storyline'
        text='Storyline'
        subtitle='Forschungsprojekt (Studium)'
        description='Companion für Schüler zur 
spielerischen Prävention von
Fake News und Cyber Mobbing
in sozialen Netzwerken'
        src={storyline}
        link='/project/storyline'
      />

      <CardItems
        bg='bg-hel'
        text='Hygiene Lab'
        subtitle='Client work'
        description='Schaffen eines erzählenswertens
Erlebnis vom Besuch öffentlicher
Toiletten mit kontaktlosen Produkten'
        src={hel}
        link='/project/hygienelab'
      />

      <CardItems
        bg='bg-nazzle'
        text='Nazzle'
        subtitle='Project (Studium)'
        description='Spielerisch die Natur erkunden und
spannende Rätsel mit Augmented
Reality lösen'
        src={nazzle}
        link='/project/songstories'
      />
    </div>
  );
}

export default Projects;

CardItem.js
import React from 'react';
import Projects from '../components/Projects';

import Nazzle from '../pages/Nazzle';
import Smartdress from '../pages/Smartdress';
import Hel from '../pages/Hel';
import Storyline from '../pages/Storyline';
import Songstories from '../pages/Songstories';

import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

function CardItems(props) {
  return (
    <div className='container'>
      <div className='my-12 mx-8 sm:mx-16 lg:mx-32 xl:mx-48 2xl:mx-80'>
        <div
          className={`shadow-md rounded overflow-hidden flex flex-col lg:flex-row ${props.bg}`}
        >
          <img
            className='z-0 max-h-64 px-4 sm:max-h-80 order-1 lg:order-2 mx-auto my-12 sm:my-16 lg:mr-8 lg:max-h-96 xl:mr-16'
            src={props.src}
          ></img>
          <div className='flex flex-col justify-around order-2 lg:order-1 mb-12 sm:mb-12 mx-8 sm:mx-16'>
            <div className=''>
              <h1 className='font-bold'>{props.text}</h1>
              <h3>{props.subtitle}</h3>
              <p className='text-gray-700'>{props.description}</p>
            </div>
            <div className='mt-4'>
              <div className='justify-center flex mt-2 lg:justify-start'>
                <Link
                  to={props.link}
                  className='btn bg-indigo-700 hover:bg-indigo-300 font-bold text-white rounded shadow-md'
                >
                  Read more
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Router></Router>
    </div>
  );
}
export default CardItems;

Projects.js
从“React”导入React，{useState}；
从“./CardItems”导入CardItems；
从“../assets/nazzle.png”导入nazzle；
从“../assets/smartdress.png”导入smartdress；
从“../assets/2.png”导入故事情节；
从“../assets/hel.png”导入hel；
从“../pages/Nazzle”导入Nazzle；
从“../pages/Smartdress”导入Smartdress；
从“../pages/Hel”导入Hel；
从“../pages/Storyline”导入故事线；
从“../pages/Songstories”导入歌曲故事；
进口{
BrowserRouter作为路由器，
转换
路线,，
链接
用户路由匹配，
useParams，
}从“反应路由器dom”；
功能项目（）{
返回(
项目
);
}
导出默认项目；

注意：项目渲染单个项目的所有卡片

Projects.js
import React, { useState } from 'react';
import CardItems from './CardItems';
import nazzle from '../assets/nazzle.png';
import smartdress from '../assets/smartdress.png';
import storyline from '../assets/2.png';
import hel from '../assets/hel.png';

import Nazzle from '../pages/Nazzle';
import Smartdress from '../pages/Smartdress';
import Hel from '../pages/Hel';
import Storyline from '../pages/Storyline';
import Songstories from '../pages/Songstories';

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useRouteMatch,
  useParams,
} from 'react-router-dom';

function Projects() {
  return (
    <div id='projects' className='container mx-auto'>
      <h1 className='line absolute ml-8 -mt-2 z-0 text-xl'>Projects</h1>

      <CardItems
        bg='bg-smartdress'
        text='Smartdress'
        subtitle='Project (Studium)'
        description='Spielerisch die Natur erkunden und
spannende Rätsel mit Augmented
Reality lösen'
        src={smartdress}
        link='/project/smartdress'
      />

      <CardItems
        bg='bg-nazzle'
        text='Nazzle'
        subtitle='Project (Studium)'
        description='Spielerisch die Natur erkunden und
spannende Rätsel mit Augmented
Reality lösen'
        src={nazzle}
        link='/project/nazzle'
      />

      <CardItems
        bg='bg-storyline'
        text='Storyline'
        subtitle='Forschungsprojekt (Studium)'
        description='Companion für Schüler zur 
spielerischen Prävention von
Fake News und Cyber Mobbing
in sozialen Netzwerken'
        src={storyline}
        link='/project/storyline'
      />

      <CardItems
        bg='bg-hel'
        text='Hygiene Lab'
        subtitle='Client work'
        description='Schaffen eines erzählenswertens
Erlebnis vom Besuch öffentlicher
Toiletten mit kontaktlosen Produkten'
        src={hel}
        link='/project/hygienelab'
      />

      <CardItems
        bg='bg-nazzle'
        text='Nazzle'
        subtitle='Project (Studium)'
        description='Spielerisch die Natur erkunden und
spannende Rätsel mit Augmented
Reality lösen'
        src={nazzle}
        link='/project/songstories'
      />
    </div>
  );
}

export default Projects;

CardItem.js
import React from 'react';
import Projects from '../components/Projects';

import Nazzle from '../pages/Nazzle';
import Smartdress from '../pages/Smartdress';
import Hel from '../pages/Hel';
import Storyline from '../pages/Storyline';
import Songstories from '../pages/Songstories';

import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';

function CardItems(props) {
  return (
    <div className='container'>
      <div className='my-12 mx-8 sm:mx-16 lg:mx-32 xl:mx-48 2xl:mx-80'>
        <div
          className={`shadow-md rounded overflow-hidden flex flex-col lg:flex-row ${props.bg}`}
        >
          <img
            className='z-0 max-h-64 px-4 sm:max-h-80 order-1 lg:order-2 mx-auto my-12 sm:my-16 lg:mr-8 lg:max-h-96 xl:mr-16'
            src={props.src}
          ></img>
          <div className='flex flex-col justify-around order-2 lg:order-1 mb-12 sm:mb-12 mx-8 sm:mx-16'>
            <div className=''>
              <h1 className='font-bold'>{props.text}</h1>
              <h3>{props.subtitle}</h3>
              <p className='text-gray-700'>{props.description}</p>
            </div>
            <div className='mt-4'>
              <div className='justify-center flex mt-2 lg:justify-start'>
                <Link
                  to={props.link}
                  className='btn bg-indigo-700 hover:bg-indigo-300 font-bold text-white rounded shadow-md'
                >
                  Read more
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Router></Router>
    </div>
  );
}
export default CardItems;

CardItem.js
从“React”导入React；
从“../components/Projects”导入项目；
从“../pages/Nazzle”导入Nazzle；
从“../pages/Smartdress”导入Smartdress；
从“../pages/Hel”导入Hel；
从“../pages/Storyline”导入故事线；
从“../pages/Songstories”导入歌曲故事；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route，Link}；
功能卡片（道具）{
返回(
{props.text}
{props.subtitle}
{props.description}
阅读更多
);
}
导出默认卡迪姆；

---

注意：为了更好地了解卡的外观，所有路线上都会显示不在特定路线内的任何组件

在您的情况下，由于

关于

、

联系人

和

侧栏

组件位于特定路由之外，因此将为所有路由（包括描述页面）呈现它们

尝试将不希望在“描述”页面上呈现的组件放在它们自己的路由中。例如，以下内容应避免在“说明”页面上呈现关于、

联系人

和

侧栏

组件（注意代码中的注释）

函数应用程序（）{
返回(
{/*在描述页上不呈现任何组件*/}
{/*仅当以project开头的任何页面未与此“开关”*/}中较早的“路由”匹配时，才在该页面上呈现这些组件
);
}

非常感谢！它终于起作用了：）