javascript - React 项目中正确路由的问题

Question

我在 React 项目中无法正确路由。 当我进入“英雄”路线时，有一个“英雄”列表(这是一个博客)。 我可以通过 id-made 链接打开文档。 当我打开文档，然后单击“Heroes”时，它没有呈现。如果我只是先打开主页或“关于”，然后再打开“英雄”，它就会呈现。 也许有人可以告诉我，如何解决这个问题，看看下面的代码。 将非常感谢任何帮助!

应用程序.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;

英雄.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;

英雄.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 存储库的链接: react-homework

提前致谢!

Answer 1

你的 Heroes 组件有路由

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

它指向 Home 组件，而在 App 中它指向 Heroes <Route path="/heroes" component={Heroes} />可能是您遇到问题的原因