React Router 更改 URL 但不会更新页面，除非它从浏览器刷新 [英] React Router changes URL but doesn't update the page unless it was refresh from browser

查看：35
本文介绍了React Router 更改 URL 但不会更新页面，除非它从浏览器刷新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

如果您介意帮助我，这是我的代码和 JS:头文件

class Header extends Component {状态 = {MainMenuAppeared:false}MainMenuShow = () =>{this.setState({MainMenuAppeared: true})}MainMenuHide = () =>{this.setState({MainMenuAppeared: false})}使成为() {返回 (<div className="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"><链接到=/"><div className=MenuLists">主页</div></Link><链接到=/设置"><div className=MenuLists">设置</div></Link></div></Router>) : (<div></div>)}</标题>

);}}

Main.js(原 App.js)

function Main() {返回 (<div className="Main"><标题/><br></br><br></br><br></br><路由器><开关><路由精确路径=/";组件={Home}/><路由路径="/settings";组件={设置}/></开关></路由器>

);}

设置.js

function Settings() {返回 (<div className="设置">设置

);}

解决方案

在组件树的顶部应该有一个 Router.所以只需将 Header 移动到 Router

function Main() {返回 (<div className="Main"><路由器><标题/><br></br><br></br><br></br><开关><路由路径="/settings";组件={设置}/><路由精确路径=/";组件={Home}/></开关></路由器>

);}

并从 Header 本身移除第二个 Router:

class Header extends Component {状态 = {MainMenuAppeared: false};MainMenuShow = () =>{this.setState({MainMenuAppeared: true});};MainMenuHide = () =>{this.setState({MainMenuAppeared: false});};使成为() {返回 (<div className="Header"><标题>{this.state.MainMenuAppeared ?(<div id="logo"onClick={this.MainMenuHide}><WebLogo/>

) : (<div id="logo"onClick={this.MainMenuShow}><WebLogo/>

)}{this.state.MainMenuAppeared &&(<div id="MainMenu"><链接到=/"><div className="MenuLists">Home</div></链接><链接到=/设置"><div className="MenuLists">设置</div></链接>

)}</标题>

);}}

So I watched a lot of tutorials on YouTube about React for beginners, However, I was at this URL (localhost/) and clicked on the Settings button changes URL to (localhost/settings) and doesn't do automatically in the browser, If I refreshed the browser with the URL (localhost/settings), the page updated and rendered from Settings.js

Here is my code and JS if you mind helping me: 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 (formerly 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>
  );
}

Settings.js

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

解决方案

There should be single Router on top of the component tree. So just move your Header inside the 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>
  );
}

and remove the 2nd Router from the Header itself:

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

这篇关于React Router 更改 URL 但不会更新页面，除非它从浏览器刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆