小编env*_*bal的帖子

重新加载 React Router 应用程序时出现 404 错误

当我在本地服务器上重新加载我的应用程序时,一切都很好。但是当我在 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)

reactjs react-router

3
推荐指数
1
解决办法
1万
查看次数

列表项未正确删除(React)

如果我的笔记应用程序能提供一些帮助,我将不胜感激。假设我的笔记列表中有 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)

arrays jsx reactjs

0
推荐指数
1
解决办法
1501
查看次数

标签 统计

reactjs ×2

arrays ×1

jsx ×1

react-router ×1