React Router 更改 URL，但不会更新页面，除非从浏览器刷新

Question

所以我在 YouTube 上看了很多关于 React 初学者的教程， 但是，我在这个 URL (localhost/) 上，单击“设置”按钮将 URL 更改为 (localhost/settings)，并且不会在浏览器中自动执行，如果我使用 URL (localhost/settings) 刷新浏览器，则页面从 Settings.js 更新并呈现

如果你介意帮助我的话，这是我的代码和JS： header.js

class Header extends Component {

    state = {
        MainMenuAppeared:false
    }

    MainMenuShow = () =>{
        this.setState({
            MainMenuAppeared: true
        })
    }

    MainMenuHide = () =>{
        this.setState({
            MainMenuAppeared: false
        })
    }

    render() {
        return (
            <div className="Header">
              <header>
                  {this.state.MainMenuAppeared ? (
                    <div id="logo" onClick={this.MainMenuHide}><WebLogo /></div>
                  ) : (
                    <div id="logo" onClick={this.MainMenuShow}><WebLogo /></div>
                  )}

                {this.state.MainMenuAppeared ?(
                    <Router>
                <div id="MainMenu">
                    <Link to="/"><div className="MenuLists">Home</div></Link>
                    <Link to="/settings"><div className="MenuLists">Settings</div></Link>
                </div></Router>) : (<div></div>)}
              </header>
            </div>
          );
    }
}

Main.js（以前的 App.js）

function Main() {
  return (
    <div className="Main">
      <Header />
      <br></br>
      <br></br>
      <br></br>
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/settings" component={Settings}/>
        </Switch>
      </Router>
    </div>
  );
}

设置.js

function Settings() {
  return (
    <div className="Settings">
     Settings
    </div>
  );
}

Answer 1

您的

Header

组件应位于

Router

组件内。 工作Codesandbox链接

<div className="Main">
  <Router>
    <Header />
    <br />
    <br />
    <br />
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/settings" component={Settings} />
    </Switch>
  </Router>
</div>

如果有效请告诉我！

Answer 2

组件树顶部应该有单个

Router

。因此，只需将您的

Header

移至

Router

内即可

function Main() {
  return (
    <div className="Main">
      <Router>
        <Header />
        <br></br>
        <br></br>
        <br></br>
     
        <Switch>
          <Route path="/settings" component={Settings}/>
          <Route exact path="/" component={Home} />
        </Switch>
      </Router>
    </div>
  );
}

并从

Router

本身中删除第二个

Header

：

class Header extends Component {
  state = {
    MainMenuAppeared: false
  };

  MainMenuShow = () => {
    this.setState({
      MainMenuAppeared: true
    });
  };

  MainMenuHide = () => {
    this.setState({
      MainMenuAppeared: false
    });
  };

  render() {
    return (
      <div className="Header">
        <header>
          {this.state.MainMenuAppeared ? (
            <div id="logo" onClick={this.MainMenuHide}>
              <WebLogo />
            </div>
          ) : (
            <div id="logo" onClick={this.MainMenuShow}>
              <WebLogo />
            </div>
          )}

          {this.state.MainMenuAppeared && (
           
              <div id="MainMenu">
                <Link to="/">
                  <div className="MenuLists">Home</div>
                </Link>
                <Link to="/settings">
                  <div className="MenuLists">Settings</div>
                </Link>
              </div>
           
          )}
        </header>
      </div>
    );
  }
}

Answer 3

我找到了一个对我有用的解决方案。如果有效的话就试试吧!!.

转到index.js文件并将React.StrictMode替换为 浏览器路由器

附上片段供参考。

祝你好运