Question

我正在使用React路由器v4来渲染路由。我有一个简单的路由组件，它路由到项目列表和编辑现有/添加新项目。这是一个使用bootstrap构建的简单选项卡组件。我想将标签组件的标题更改为Add new或Edit existing，具体取决于路线是否具有ID属性。

理想情况下，我希望避免创建其他组件，因为它不会觉得这会增强代码的可读性。

public render() {
    const { match, location } = this.props;

    const customers = cx({ active: !location.pathname.includes("AddEdit") });
    const editItem = cx({ active: location.pathname.includes("AddEdit") });

    const hasIdParam = {/* Some way to read match params to get the id */};

    return <div className='nav-component-container'>
        <nav>
            <ul>
                <li role="presentation" className={items}><NavLink to={`${match.url}/All`} activeClassName='active'>Items</NavLink></li>
                <li role="presentation" className={editItem}>
                    <NavLink to={`${match.url}/AddEdit`} activeClassName='active'>
                        {/* I'd like this to say either new item or edit existing based on whether the current route has an id parameter or not */}
                    </NavLink>
                </li>
            </ul>
        </nav>
        <Switch>
            <Route path={`${match.url}/All`} component={Customers} {...this.props}></Route>
            <Route path={`${match.url}/AddEdit/:id?`} component={Item}></Route>
        </Switch>
    </div>;
}

有各种各样的黑客 - 其中最好的似乎是阅读location.pathname属性并用它来确定它是编辑还是添加新内容 - 这就足够但我不能帮助我感觉我在

中遗漏了什么

Answer 1

在您的Item组件中，您将获得网址路径的url参数，即id到match对象。

var strId = props.match.params.id //ecma5
let strId = this.props.match.params.id //ecma6

基于strId，您可以更改标签标签。

if(strId){
   //use edit lable
}else{
  //add label
}

Answer 2

您可以尝试分离路由以进行编辑和添加，但可以使用类型为prop的相同组件。

示例

<Switch> <Route path={`${match.url}/All`} component={Customers} {...this.props}></Route> <Route path={`${match.url}/Details/:id?`} component={()=>(<Item type="detail" />)}></Route> <Route path={`${match.url}/Edit/:id?`} component={()=>(<Item type="edit" />)}></Route> <Route path={`${match.url}/Add/:id?`} component={()=>(<Item type="add" />)}></Route> </Switch>

然后在Item组件上，您可以检查this.props.type并相应地进行渲染。

React路由器访问路由组件中的路由属性

2 个答案: