文章/答案/技术大牛

发布

社区首页 >问答首页 >反应路由器不能正常工作为我

问反应路由器不能正常工作为我
EN

Stack Overflow用户

提问于 2018-04-07 10:29:05

回答 2查看 24关注 0票数 1

在我的应用程序中，..i设置路由器有问题，但是当我单击第二个链接时，两个组件同时出现。

return (
  <BrowserRouter>
    <div>
      <div className="sidenav">
        <img 
          src={require("../src/images/logo-light.png")} 
          style={{maxWidth:'20vh',maxHeight:'60vh',marginLeft:'2vh'}}
        />
        <a><NavLink to="/">Home</NavLink></a>
        <a><NavLink to="/function2">Function2</NavLink></a>
      </div>

      <div className="content" style={{minHeight:'94vh',maxHeight:'0vh'}}>
        <Route 
          path="/" 
          render={() => 
            <Home come={this.coming} sendname={{newname:this.state.username}}/>
          } 
        />
        <Route path="/function2" render={() =><Fun2 />} />
      </div>
    </div> 
  </BrowserRouter>
);

告诉我，我还添加了我的应用程序在这里输入图像描述的屏幕快照，问题在哪里？

reactjs

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-04-07 10:36:21

您将需要将您的<Route>封装在<Switch></Switch>中，并且可能希望将exact属性添加到索引路由中

<BrowserRouter>
  <div>
    <div className="sidenav">
      <img src={require( "../src/images/logo-light.png")} style={{maxWidth: '20vh',maxHeight: '60vh',marginLeft: '2vh'}}/>
      <a>
        <NavLink to="/">Home</NavLink>
      </a>
      <a>
        <NavLink to="/function2">Function2</NavLink>
      </a>
    </div>


    <div className="content" style={{minHeight: '94vh',maxHeight: '0vh'}}>
      <Switch>
        <Route exact path="/" render={()=> <Home come={this.coming} sendname={{newname:this.state.username}}/>} />
        <Route path="/function2" render={()=> <Fun2 />} />
      <Switch>
    </div>
  </div>
</BrowserRouter>

票数 0

Stack Overflow用户

发布于 2018-04-07 10:38:05

在Reactive路由器中，您需要添加一个开关，它将只选择路径中的一个。

另外，对于根路径，您应该在道具中添加确切的，这样它就只能在该路径上匹配。

<Switch>
  <Route exact path="/" render={()=> <Home come={this.coming} sendname={{newname:this.state.username}}/>} />
  <Route path="/function2" render={()=> <Fun2 />} />
<Switch>

还请记住排序的重要性。因此，它将选择匹配的第一条路由(这就是为什么添加道具精确的原因)。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/49706370

复制

相似问题

问反应路由器不能正常工作为我
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问反应路由器不能正常工作为我EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问反应路由器不能正常工作为我
EN