我在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
提前致谢!
您的英雄部分有路线
<Route
exact
path="/heroes"
component={Home}
/>
指向Home组件,而在App中则指向Heroes<Route path="/heroes" component={Heroes} />
可能是导致问题的原因
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句