当我在本地服务器上重新加载我的应用程序时,一切都很好。但是当我在 gh-pages 上托管时重新加载页面时,出现 404 错误。它不会在主页上执行此操作,但会在其他两个页面上执行此操作。这是否与远程托管有关?我对 React Router 有点菜鸟。任何帮助将不胜感激。下面是相关代码和我的应用程序的链接:
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
class App extends Component {
render() {
return (
<Router>
<div className="App">
<Nav />
<div className="container">
<Switch>
<Route exact path="/react-game-search" component={MainPage} />
<Route path="/games" component={GameSearch} />
<Route path="/about" component={About} />}
<Route path="/details" component={GamesDetails} />}
</Switch>
</div>
</div>
</Router>
);
}
}
const Nav = () => {
return (
<div className="navbar">
<div className="navbar-item">
<NavLink
exact to="/react-game-search/"
activeClassName="selected"
className="nav-link"
>Home</NavLink>
</div>
<div …Run Code Online (Sandbox Code Playgroud) 如果我的笔记应用程序能提供一些帮助,我将不胜感激。假设我的笔记列表中有 3 个笔记。我想删除列表顶部的注释。无论我尝试删除哪一个,总是首先删除列表最底部的注释。我检查了 React 控制台,应用程序组件状态中的注释数组表明它已正确删除。但从实际的角度来看,事实并非如此。我怎样才能得到它,以便删除我选择的确切注释?
class App extends Component {
constructor(props) {
super(props);
this.state = {
notes: [],
title: "",
details: ""
}
this.updateTitle = this.updateTitle.bind(this);
this.updateDetails = this.updateDetails.bind(this);
this.submitHandler = this.submitHandler.bind(this);
this.deleteHandler = this.deleteHandler.bind(this);
}
updateTitle(event) {
this.setState({ title: event.target.value });
}
updateDetails(event) {
this.setState({ details: event.target.value });
}
submitHandler(e) {
e.preventDefault();
if (!this.state.title.length || !this.state.details.length) {
return;
}
const newNote = {
newTitle: this.state.title,
newDetails: this.state.details
}
this.setState(prevState => ({
notes: prevState.notes.concat(newNote),
title: "",
details: ""
}))
} …Run Code Online (Sandbox Code Playgroud)