时间戳

首页 > 解决方案 > React Router 在单独的页面上渲染组件

javascript - React Router 在单独的页面上渲染组件

问题描述

我开始了我的第一个 React 项目，并想自己构建我的设计组合。所以这也是我第一次使用 React Router 或者尝试通过单击按钮将组件相互组合。

我想在 App.js 中呈现所有标准组件，并且只想将我的项目与带有按钮的描述项目页面链接起来。因此，如果用户单击按钮，他们将链接到该项目的描述。但令人惊讶的是它不起作用。我现在的问题是，描述页面呈现在与“关于、导航栏、联系人”等标准组件相同的页面中。但我希望项目中的描述页面呈现在单独的页面中。我能做什么？

我想这是我的相关代码，以了解我到目前为止所做的事情。但是，如果您需要更多片段，请说出来。:)

App.js
import React, { useState, useRef } from 'react';
import Navbar from './components/Navbar';
import Footer from './components/Footer';
import Contact from './components/Contact';
import Hero from './components/Hero';
import About from './components/About';
import Cards from './components/Cards';
import Sidebar from './components/Sidebar';
import Projects from './components/Projects';
import ProjectPath from './components/ProjectPath';

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

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

function App() {
  return (
    <>
      <Router>
        <Navbar />
        <Hero />
        <Projects />
        <Switch>
          <Route exact path='/project/smartdress' component={Smartdress} />
          <Route exact path='/project/nazzle' component={Nazzle} />
          <Route exact path='/project/storyline' component={Storyline} />
          <Route exact path='/project/hygienelab' component={Hel} />
          <Route exact path='/project/songstories' component={Songstories} />
        </Switch>
        <About />
        <Contact />
        <Sidebar />
        <Footer />
      </Router>
    </>
  );
}

export default 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;

注意：为了更好地了解卡片的外观

标签： javascriptreactjsreact-router

解决方案

不在特定路由内的任何组件都将显示在所有路由上。

在您的情况下，由于About、Contact和Sidebar组件位于特定路由之外，因此它们将为所有路由呈现 - 包括描述页面。

尝试将您不想在描述页面上呈现的组件放在它们自己的路由中。例如，以下应避免在描述页面上呈现About、Contact和Sidebar组件（注意代码中的注释）。

function App() {
  return (
    <>
      <Router>
        <Navbar />
        <Hero />
        <Projects />
        <Switch>
          <Route exact path='/project/smartdress' component={Smartdress} />
          <Route exact path='/project/nazzle' component={Nazzle} />
          <Route exact path='/project/storyline' component={Storyline} />
          <Route exact path='/project/hygienelab' component={Hel} />
          <Route exact path='/project/songstories' component={Songstories} />
        </Switch>
        <Switch>
          <Route exact path='/project/smartdress' /> {/* render no components on the description page */}
          <Route path='/project'> {/* render these components on any page starting with project ONLY IF it has not been matched by an earlier `Route` in this `Switch` */}
            <About />
            <Contact />
            <Sidebar />
          </Route>
        </Switch>
        <Footer />
      </Router>
    </>
  );
}

推荐阅读