location.pathname vs router

Question

我还在学习路由器v4的反应。我想知道这样做有什么区别

使用

获取位置

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

选项1

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

这个 选项2

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

至于我，虽然第一个选项显示适合我的一切， 第二个，即路由器一，仅在页面的一半显示该组件。 现在，为什么会这样？ 选项1结果 - ＆gt; 选项2结果 - ＆gt; 但主要观点 - ＆gt;使用location.path名称和路由器

之间的区别是什么

Answer 1

反应路由器的一个主要功能是你可以做以下事情：

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

和id将传递到User组件。

实施例。 /user/bob和/user/jill都会呈现User组件，但在componentDidMount中，您现在可以从API中获取正确的用户信息。

使用location.pathname，任务变得更加复杂，如@palsrealm所述。但首先，location道具必须可用于此方法。

还有其他功能你会失败，但这是我能想到的主要功能。您可以查看Route api documentation here。

编辑：至于为什么渲染方式不同，我真的无法在没有更多背景的情况下回答。例如，Route是否包含在Switch组件中，如下所示：

<Switch>
    // Other routes
    <Route exact path="/500" component={Page500} />
</Switch>

Answer 2

在选项2 <Route path={'/500'} component={Page500} /> 在这里，您将创建一个路径为/ 500并加载组件Page500的路径。这意味着当用户导航到Route中指定的路径时，React-Router将呈现定义Route的组件。

在选项1 中，

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

父组件根据收到的Page500道具决定何时呈现location组件。这个location道具最终将来自一条路线或withRouter HOC。这相当于

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

也可以写成

<Route path={'/500'} component={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中获得半页渲染的原因。为了防止这种情况发生并仅渲染匹配的第一个路由，您应该添加Switch < / p>

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

Switch的更多内容可在https://reacttraining.com/react-router/web/api/Switch

找到