Reactjs 单页应用程序 - 导航到链接时组件未加载

Question

我创建了一个电影和视频的单页应用程序。此Web应用程序有4个链接，可显示不同类型的视频和电影。例如，"儿童"链接显示儿童视频，"体育"链接显示体育视频等。 根据链接名称，我正在调用一个 API 来加载该页面上的数据。但是在单击链接时，这不会发生。下面是代码

// Root.js
class Root extends Component {
constructor(props) {
super(props);
this.state = {
items: [],
isLoaded: false,
}
}
componentDidMount() {
let currentPath = this.props.match.path;
var apiUrl = "";
if (currentPath == "/movies") {
apiUrl = "zzzzzzzzz";
} else if (currentPath == "/kids") {
apiUrl = "yyyyyyyyy";
} else if (currentPath == "/sports") {
apiUrl = "xxxxxxxx";
}
fetch(apiUrl)
.then(res => res.json())
.then(json => {
this.setState({
items: json,
isLoaded: true
});
})
}
render() {
var { items, isLoaded } = this.state;
return (
<div className="Root" >
<HeaderNav />
<Main items={items} />
<Footer />
</div>
);
}
}
export default Root;
// App.js
class App extends Component {
render() {
return (
<Router>
<Switch>
<Route path="/" exact component={Root} />
<Route path="/movies" exact component={Root} />
<Route path="/kids" exact component={Root} />
<Route path="/" render={() => <h2>  404 Not Found</h2>} />
</Switch>
</Router>
);
}
}
export default App;
// HeaderNav.js
class HeaderNav extends Component {
render() {
return (
<nav className="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div className="container">
<a className="navbar-brand" href="/home">MOOVID</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarResponsive">
<ul className="navbar-nav ml-auto">
<li className="nav-item active">
<Link className="nav-link" to="/">Home
<span className="sr-only">(current)</span>
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/movies">Movies</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/sports">Sports</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/kids">Kids</Link>
</li>
</ul>
</div>
</div>
</nav>
);
}
}
export default HeaderNav; ```

Answer 1

你的 if/else 块并不详尽，你确定 currentPath 不是未定义的吗？尝试在条件之后console.log(currentPath)。如果这有效，那么尝试在 this.setState(( 之前console.log(json)，以确保 json 结果是预期的。最后，您确定items以列表形式返回吗？

Answer 2

在这里分享我的发现

// MenuComponent.js
import React, {Component} from 'react';
import Root from './Root';
class Kids extends Component {
render() {
return (
<Root text="kids"  />
);
}
}
class Movies extends Component {
render() {
return (
<Root text="movies"  />
);
}
}
class Sports extends Component {
render() {
return (
<Root text="sports"  />
);
}
}
export { Kids, Movies, Sports };

添加了一个新的组件类，其中包含所有菜单的类

//Updated App.js
import React, {Component} from 'react';
import './css/main.css';
import './css/bootstrap/css/bootstrap.min.css';
import Root from "./Components/Root"
import { Kids, Movies, Sports } from "./Components/MenuComponents"
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

class App extends Component {
render() {
return (
<Router>
<Switch>
<Route path='/movies' exact component={Movies} />
<Route path='/sports' exact component={Sports} />
<Route path='/kids' exact component={Kids}  />
<Route path="/" exact component={Root} />
<Route path="/*" render={() => <h2>  404 Not Found</h2>} />*/}
</Switch>
</Router>
);
}
}
export default App;

然后我在路由组件中调用上面的菜单组件类。 MenuComponent.js中的类间接调用"Root"组件。通过这种方式，我可以确保组件的可重用性

这对我来说非常有效。如果我们想添加新菜单，请在 MenuComponent 中添加一个类.js并为菜单添加一个路由