Javascript React路由器更改URL但不'；除非从浏览器刷新页面，否则无法更新该页面

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

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

这是我的代码和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>
          );
    }
}

类头扩展组件{
状态={
主菜单显示：false
}
MainMenuShow=（）=>{
这是我的国家({
主菜单显示：正确
})
}
MainMenuHide=（）=>{
这是我的国家({
主菜单显示：false
})
}
render（）{
返回(
{出现了this.state.main菜单(
) : (
)}
{出现了this.state.main菜单(
家
设置
) : ()}
);
}
}

Main.js（以前的App.js）

函数Main（）{
返回(









);
}

Settings.js

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

函数设置（）{
返回(
设置
);
}

您的

头

组件应该在

路由器

组件内。 工作

---

让我知道它是否有效

在组件树的顶部应该有一个

路由器
。所以只需将您的
标题
移动到
路由器内

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>
  );
}

不要将
链接
包装在
路由器
内，你的应用程序应该只有一个
路由器
，谢谢你的第一个方法！这些不是方法，您必须了解，应用程序只能有一个
包装器，因此我们必须将
路由器
组件放在
头
组件上方，并从
头
组件中删除，如codesandbox所示。两个答案都是一样的。我只是在codesandbox中做了第二步，而不是在这里写。谢谢第二种方法！我更喜欢这个
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>
  );
}

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>
    );
  }
}