Question

在我的应用程序中，我有两个不同的组件，因为它们具有相同的起始路径。我当前的应用程序流程使用以下方法从“预订”到“时间”部分：

<Link to={'/booking/' + this.props.booking.getURLName()} >

如何在出现“时间”组件时使“预订”组件消失？

<Router history={history}>
    <div>
        <IndexRoute exact path="/" component={Home} />
        <Route path='/booking' render={(props) => <Booking {...props} details={details} />}/>
        <Route path='/booking/:name' render={(props) => <Time {...props} details={details} />}/>
    </div>
</Router>

class Booking extends Component {

    render() {
        return (
            <Col>
                <Link to={'/booking/' + this.props.booking.getURLName()} >
                    <div>
                        // Booking details here
                    </div>
                </Link>
            </Col>
        );
    }
}

Answer 1

使用来自反应路由器dom的开关。

<Switch history={history}>
<div>
    <IndexRoute exact path="/" component={Home} />
    <Route path='/booking' render={(props) => <Booking {...props} details={details} />}/>
    <Route path='/booking/:name' render={(props) => <Time {...props} details={details} />}/>
</div>
</Switch>

相同路线隐藏组件问题

1 个答案: