时间戳

首页 > 解决方案 > 网站仅在重新加载后更改 - 反应路由器

javascript - 网站仅在重新加载后更改 - 反应路由器

问题描述

我想制作一个导航栏，其中包含指向不同路线的不同链接。在另一个文件中，我有 react-router 的东西来更改网站。但是当我按下链接时它可以工作，但前提是我之后重新加载。

头文件：

export default function Head(props){
    return(
        <Router>            
            <div className="Head">                      
                <div className="HeadItemFirst">bwftp</div>         
                <div className="HeadPaths">                    
                    <Link className="HeadItem" to="/"><div>Start</div></Link>
                    <Link className="HeadItem" to="/about"><div>about</div></Link>
                    <Link className="HeadItem" to="/settings"><div>Settings</div></Link>                        
                </div>                                 
            </div>             
        </Router> 
    )
}

和应用程序文件：

export default function App(){
   return(
  <div className="App">
  <Head />{/* Here are all the links in a navbar stored */}      
  <Body /> 
  <Foot />

  <Router>         
    <Switch>
      <Route path="/" exact component={Home}/>
      <Route path="/about" exact component={About}/>
      <Route path="/settings" exact component={Settings}/>
      <Route render={()=>(<h1>404</h1>)}/>
    </Switch>
  </Router>
</div>
  )
}

标签： javascriptreactjsreact-router

解决方案

您无需在应用程序中使用多个路由器实例。而是在最顶层的父级设置一个。如果使用多条Route，Head里面的Link组件只会和Router里面的组件通信，Head不会中继信息route change to Router in App

此外，如果您将 Head 渲染为默认 Route，它将接收来自 Route 的所有道具，并确保 Routes 的顺利运行

export default function Head(props){
    return(
        <div className="Head">                      
            <div className="HeadItemFirst">bwftp</div>         
            <div className="HeadPaths">                    
                <Link className="HeadItem" to="/"><div>Start</div></Link>
                <Link className="HeadItem" to="/about"><div>about</div></Link>
                <Link className="HeadItem" to="/settings"><div>Settings</div></Link>                        
            </div>                                 
        </div>             
    )
}


export default function App(){
   return(
      <Router>
        <div className="App">
          <Route component={Head} />    //Render as a default route so that it gets route params
          <Body /> 
          <Foot />         
          <Switch>
            <Route path="/" exact component={Home}/>
            <Route path="/about" exact component={About}/>
            <Route path="/settings" exact component={Settings}/>
            <Route render={()=>(<h1>404</h1>)}/>
          </Switch>
        </div>
      </Router>
  )
}

推荐阅读