Проблема с правильной маршрутизацией в проекте React - PullRequest
Новая
       7

Проблема с правильной маршрутизацией в проекте React

1 голос
/ 05 ноября 2019

У меня проблема с правильной маршрутизацией в проекте React. Когда я иду по маршруту «Герои», появляется список «героев» (это блог). Я могу открыть документ по ID-ссылке. Когда я открываю документ, а затем нажимаю «Герои», он не отображается. Он будет отображаться, если я только сначала открою главную страницу или «о», а затем открою «Герои». Может быть, кто-то может сказать мне, как это исправить, глядя на код ниже. Буду очень признателен за любую помощь!

App.jsx 

import React, { Component } from 'react';
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom';
import Heroes from './components/Heroes';
import About from './components/About';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <>
          <Header />
          <div className="container">
            <Switch>
              <Route path="/" exact component={Home} />
              <Route path="/heroes" component={Heroes} />
              <Route path="/about" component={About} />
            </Switch>
          </div>
        </>
      </BrowserRouter>
    );
  }
}

const Header = () => (
  <nav>
    <div className="container">
      <div className="nav-wrapper">
        <Link to="/" className="brand-logo">
          <i className="material-icons">home</i>
        </Link>
        <ul id="nav-mobile" className="right hide-on-med-and-down">
          <li>
            <Link to="/heroes">Heroes</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </div>
    </div>
  </nav>
);

const Home = () => (
  <>
    <h3>Fullstack Express-Apollo-React</h3>
  </>
);

export default App;

Heroes.jsx 

import React, { Component } from 'react';
import { BrowserRouter, Switch, Route, Link } from "react-router-dom";
import Hero from './Hero';

const mockData = {
  "heroes": [
    {
      "_id": "5db31d0c5419031a7c8d749c",
      "title": "qqqqqqqqqqqqqqq",
      "description": "ljlkjlkjlkj",
      "date": "1572019076651"
    },
    {
      "_id": "5db331e25419031a7c8d749d",
      "title": "gfdgfdhgfdhgfdgf",
      "description": "yuytruytrytryt",
      "date": "1572019076651"
    },
    {
      "_id": "5db332405419031a7c8d749e",
      "title": "mnbvmnbvmnbvnbvmn",
      "description": "eytretretretretr",
      "date": "1572019076651"
    }
  ]
}

class Heroes extends Component {
  render() {
    return (
      <div>
        <BrowserRouter>
          <Switch>
            {mockData.heroes.map(hero => (
              <Route
                exact
                path={`/heroes/${hero._id}`}
                render={() => <Hero data={hero} />}
              />
            ))}
            <Route
              exact
              path="/heroes"
              component={Home}
            />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

const Home = () => {
  return (
    <>
      {mockData.heroes.map(hero => (
        <div key={hero._id}>
          <Link to={`/heroes/${hero._id}`}>
            <h3>{hero.title}</h3>
          </Link>
          <h5>{hero.description}</h5>
          <h5>{hero.date}</h5>
        </div>
      ))}
    </>
  );
};

export default Heroes;

Hero.jsx 

import React, { Component } from 'react';

class Hero extends Component {
  render() {
    return (
      <>
        <h5>{this.props.data.title}</h5>
        <h5>{this.props.data.description}</h5>
      </>
    );
  }
}

export default Hero;

При необходимости, вот ссылка на репозиторий github: реакция-домашнее задание

Заранее спасибо!

Ответы [ 2 ]

1 голос
/ 06 ноября 2019

Ваш компонент Героев имеет маршрут 

    <Route
      exact
      path="/heroes"
      component={Home}
    />

, который указывает на домашний компонент, а в приложении он указывает на Героев <Route path="/heroes" component={Heroes} /> Может быть причиной вашей проблемы

0 голосов
/ 06 ноября 2019 
import React, { Component } from 'react';
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom';
import About from './components/About';
import Hero from './components/Hero';

const mockData = {
  "heroes": [
    {
      "_id": "5db31d0c5419031a7c8d749c",
      "title": "qqqqqqqqqqqqqqq",
      "description": "ljlkjlkjlkj",
      "date": "1572019076651"
    },
    {
      "_id": "5db331e25419031a7c8d749d",
      "title": "gfdgfdhgfdhgfdgf",
      "description": "yuytruytrytryt",
      "date": "1572019076651"
    },
    {
      "_id": "5db332405419031a7c8d749e",
      "title": "mnbvmnbvmnbvnbvmn",
      "description": "eytretretretretr",
      "date": "1572019076651"
    }
  ]
}

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <>
          <Header />
          <div className="container">
            <Switch>
              <Route path="/" exact component={Home} />
              {mockData.heroes.map(hero => (
                <Route
                  exact
                  path={`/heroes/${hero._id}`}
                  render={() => <Hero data={hero} />}
                />
              ))}
              <Route
                exact
                path="/heroes"
                component={heroesIndex}
              />
              <Route path="/about" component={About} />
            </Switch>
          </div>
        </>
      </BrowserRouter>
    );
  }
}

const Header = () => (
  <nav>
    <div className="container">
      <div className="nav-wrapper">
        <Link to="/" className="brand-logo">
          <i className="material-icons">home</i>
        </Link>
        <ul id="nav-mobile" className="right hide-on-med-and-down">
          <li>
            <Link to="/heroes">Heroes</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </div>
    </div>
  </nav>
);

const heroesIndex = () => {
  return (
    <>
      {mockData.heroes.map(hero => (
        <div key={hero._id}>
          <Link to={`/heroes/${hero._id}`}>
            <h3>{hero.title}</h3>
          </Link>
          <h5>{hero.description}</h5>
          <h5>{hero.date}</h5>
        </div>
      ))}
    </>
  );
};

const Home = () => (
  <>
    <h3>Fullstack Express-Apollo-React</h3>
  </>
);

export default App;
...