Zacząłem projekt pierwszego reagowania i chcesz zbudować moje portfolio projektowe samodzielnie. Więc to także mój pierwszy raz pracujący z routerem reagowania lub spróbuj połączyć komponenty ze sobą, klikając przycisk.

Chcę uczynić wszystkie standardowe komponenty w app.js i chcesz połączyć tylko mój projekt za pomocą stron projektu Opis za pomocą przycisku. Więc jeśli użytkownik kliknął przycisk, do którego zostanie powiązany z opisem tego projektu. Ale niespodzianka to nie działa. Mój problem jest teraz, gdy strona opisu świadczona na tej samej stronie, co standardowy komponent, taki jak "O, Navbar, Contact" świadczonych. Ale chcę, aby strona opisu z projektów świadczonych na osobnej stronie. Co mogę zrobić to, co działa?

Myślę, że jest to mój odpowiedni kod, aby zrozumieć, co do tej pory zrobiłem. Ale jeśli potrzebujesz więcej fragmentów, powiedz to. :)

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;

Uwaga: / strony / Smartdress -> Czy opis projektów

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;

Uwaga: Projekty renderują wszystkie karty pojedynczych projektów

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;

Uwaga: Aby lepiej zrozumieć, jak wyglądają karty

0
Anne 17 kwiecień 2021, 03:11

1 odpowiedź

Najlepsza odpowiedź

Każdy komponent nie jest w określonej trasie, zostanie wyświetlony na wszystkich trasach.

W twoim przypadku, ponieważ About Contact i składniki Sidebar są poza określonymi trasami, będą one renderowane dla wszystkich tras - w tym strona opisu.

Spróbuj umieścić komponenty, których nie chcesz, renderowane na stronie opisu wewnątrz własnej trasy. Na przykład, następujące powinny unikać świadczenia About, Contact, i Sidebar elementów na stronie opisu (zwróć uwagę na komentarze w kodzie).

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>
    </>
  );
}
0
Jack Buehner 17 kwiecień 2021, 00:41