反应路由器仅更新网址答案

【问题标题】：react router only update url反应路由器仅更新网址
【发布时间】：2021-04-29 09:45:35
【问题描述】：

当我单击配置文件导航器时，网址会更改，但页面不会。我尝试在我的 App.js 和 Profile.js 中使用 withRouter 将路由器标签移动到 index.js 中，但它不起作用。我已经在我的主页网址中使用了确切的内容。这是代码 App.js

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/profile" component={withRouter(ProfilePage)} />
      </Switch>
    </Router>
  );
}

这是 Home.js

const home = () => {
    return(
        <Router>
            <div className="container">
                <img src={environment} alt="environment" className="environment"/>
                <Link to="/email"><img src={pos} alt="pos" className="pos"/></Link>
                <Link to="/profile" className="profile"><img src={profile} alt="profil"/></Link>
                <Link to="/experiences"><img src={experience} alt="experience" className="experience"/></Link> 
                <Link to="/projects"><img src={project} alt="project" className="project"/></Link>
            </div>
      </Router>
    );
}

Profile.js

const Profile = () => {
    return(
        <div className="profile-container">
            <h2>Profile</h2>
            <span className="line"></span>
            <img src={photo} alt="photo-profile" className="photo-profile"/>
            </div>
        </div>
    );
}

【问题讨论】：

标签： react-router react-router-dom

【解决方案1】：

您应该更新主页并删除路由器页面：

const home = () => {
return(
        <div className="container">
            <img src={environment} alt="environment" className="environment"/>
            <Link to="/email"><img src={pos} alt="pos" className="pos"/></Link>
            <Link to="/profile" className="profile"><img src={profile} alt="profil"/></Link>
            <Link to="/experiences"><img src={experience} alt="experience" className="experience"/></Link> 
            <Link to="/projects"><img src={project} alt="project" className="project"/></Link>
        </div>
);

}

我认为这是您尝试调用路由器两次的问题。

【讨论】：