Question

我正在使用react router 4来显示用户列表。当路由匹配Users时，组件\Users会加载。在内部，当网址与Route匹配时，我已经定义了\Users\:id已定义的（用户详细信息）。

Users页面有一个网格/表格，列数很少。

render(){
    const {users, flags} = this.props;
    return (
        <div>
            <h3>Users</h3>
            <div className="col-md-12">
                <UsersGrid users={this.state.users} />
            </div>
            <Route path="/users/:id" component={UserDetail} />
        </div>
    )
}

我想要的是，如果用户详细信息路由处于活动状态，则缩小用户网格（例如应用类col-md-4）并在其右侧显示用户详细信息。

但我不知道如何检测子路由是否处于活动状态，以便我可以有条件地将一个类应用于一个元素。我尝试使用this.props.children，但始终未定义。

Answer 1

您可以使用react-router

中的

<?xml version="1.0" encoding="UTF-8"?>  
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">  
<plist version="1.0">   
<dict>  
    <key>com.apple.security.app-sandbox</key>
    <true/>
    <key>com.apple.security.device.bluetooth</key>
    <true/>
    <key>com.apple.security.files.user-selected.read-only</key>
    <true/>
</dict> 
</plist>

matchPath

Answer 2

如果url显示在地址栏中，那么您可以使用window.location检查它是否包含/ user之后的字符串，然后执行带条件检查的操作：

        if(/user/{anyid}) {
         *your condition action*
        } else {
         *else action*
        }

您可以使用字符串正则表达式来匹配ID。

React router 4 - 检测其中一个子路由是否匹配父组件

2 个答案: