Question

我在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存储库的链接： react-homework

谢谢！

Answer 1

您的英雄组件具有路线

public async Task<GetMediaTypesReponse> GetMediaTypes()
    {
        GetMediaTypesReponse response = new GetMediaTypesReponse();
        response.Mediatypes = new List<Dictionary<string, string>>();
        IList<Media> medias = await mediaRepository.GetAllAsync();

        foreach (var media in medias)
        {
            var item = new Dictionary<string, string>();
            foreach (var property in media.GetType().GetProperties())
            {
                item.Add(property.Name, property.GetValue(media).ToString());
            }
            response.Mediatypes.Add(item);
        }

        return await Task.FromResult(response);
    }

它指向Home组件，而在App中则指向Heros <Route exact path="/heroes" component={Home} />，可能是导致问题的原因

Answer 2

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;

React项目中正确路由的问题

2 个答案: