Reactjs location.pathname与路由器

我还在学习react路由器v4。我想知道这样做到底有什么区别

使用

const {
      match,
      location,
      layoutBoxed,
      navCollapsed,
      navBehind,
      fixedHeader,
      sidebarWidth,
      theme,
    } = this.props;

选项1

if(location.pathname === '/500'){
        return <Page500 />

if（location.pathname=='/500'）{
返回

还有这个 选项2

<Route path={'/500'} component={Page500} />

对我来说，虽然第一个选项为我正确显示了所有内容， 第二个，即路由器，仅在页面的一半显示组件。 为什么会这样？ 选项1结果--> 选项2结果-->

---

但是要点-->使用location.path名称和路由器之间的区别是什么？

react router的主要功能之一是，您可以执行以下操作：

<Route path="/user/:id" component={User} />

---

在选项2中

这里您正在创建路径为/500的路由，并加载组件

Page500

。这意味着当用户导航到路由中指定的路径时，React Router将呈现定义路由的组件

在选项1中

if(location.pathname === '/500'){
        return <Page500 />
 }

也可以写成

总之，如果从父组件获得位置道具，则只能执行选项1，您可以在应用程序中的任何位置定义路线（选项2）

编辑： 如果你有你所有的路线像

return( <div> 
    <Route path={'/500'} component={Page500} />
    <Route path={'/confirm-email'} component={PageConfirmEmail} /> 
    <Route path={'/lock-screen'} component={PageLockScreen} /> 
    <Route path={'/login'} component={PageLogin} /> 
    <Route path={'/sign-up'} component={PageSignUp} />
     <Route path={'/forgot-password'} component={PageForgotPassword} />
    <Route path={'/fullscreen'} component={PageFullscreen} />

</div> );

---

有关开关的更多信息，请访问

如何获取组件的位置道具？您能否提供选项2代码？好的，您现在可以看到选项2是的，谢谢。您可以发布第一个选项的代码吗？我需要查看您如何获取组件中的位置道具。好的，您可以看到我从哪里获取道具现在我同意“使用location.pathname，任务会变得更加复杂”。但是您不需要拆分路径来自己获取id。您应该使用

match

prop；特别是

match.params.id

来获取id，如果您自己在做。不。路由仅在div

返回中(                                                                          )；

根据@faraz的评论编辑了我的答案是渲染不完整的原因？更新了我的答案。检查链接和他们给出的示例。您的代码可能会出现类似的情况，导致渲染多条路线，从而使第一条路线在屏幕上渲染了一半。好吧，我补充道d切换，它对渲染问题没有影响。你能在codesandbox.io复制你的问题并共享它吗？嗯，这是一个大项目的一部分，我不确定我是否能在codesandbox复制这个问题。但我会尝试在这里共享。不过会晚一点。

<Route render={(props)=>{
            if(props.location.pathname === '/500'){
                            return <Page500 />;
             }else{
             return null;
             }
          }
        }
   />

return( <div> 
    <Route path={'/500'} component={Page500} />
    <Route path={'/confirm-email'} component={PageConfirmEmail} /> 
    <Route path={'/lock-screen'} component={PageLockScreen} /> 
    <Route path={'/login'} component={PageLogin} /> 
    <Route path={'/sign-up'} component={PageSignUp} />
     <Route path={'/forgot-password'} component={PageForgotPassword} />
    <Route path={'/fullscreen'} component={PageFullscreen} />

</div> );

return( <div> 
   <Switch>
    <Route path={'/500'} component={Page500} />
    <Route path={'/confirm-email'} component={PageConfirmEmail} /> 
    <Route path={'/lock-screen'} component={PageLockScreen} /> 
    <Route path={'/login'} component={PageLogin} /> 
    <Route path={'/sign-up'} component={PageSignUp} />
     <Route path={'/forgot-password'} component={PageForgotPassword} />
    <Route path={'/fullscreen'} component={PageFullscreen} />
   </Switch>
</div> );