부모 구성 요소와 다른보기에 구성 요소를 표시하려고했지만 Link클릭하면 동일한보기, 첫 번째 부모 구성 요소와 바로 아래 자식 구성 요소에 두 구성 요소가 표시됩니다 .

간단한 장바구니 ( /cart)이며 클릭 Pay하면 체크 아웃 ( /cart/checkout)보기 로 리디렉션되어야합니다 . 그럼에도 불구하고 component바로 아래에 렌더링됩니다.

다른 경로로 설정하려고했지만 해당 경로에 component CheckoutData중첩하지 않으면 렌더링되지 않습니다.parent Cart.js

나는 이것을 달성하고 싶다.

Cart구성 요소가 렌더링되면 클릭 Pay Link하면 CheckoutData구성 요소 로 리디렉션됩니다 .

Cart.js

class Cart extends Component {
    // constructor and state

    removeItem(id) {
        // Axios call
    }

    componentDidMount() {
        //Axios call
    }

    render() {
        return (
            <div>
                <ParentNav />
                // content table
                        <Link to="/cart/checkout">
                            Pay
                        </Link>

                        <Link to="/">
                            Go back
                        </Link>
                    </div>
                </div>
                <Footer />
            </div>
        );
    }
}

CheckoutData.js

class CheckoutData extends Component {
    //constructor and state

    render () {
        return (
        <div>
            <ParentNav />
            <CheckoutForm  passToken={this.state.token} />
            <Footer />
        </div>
        )
    }
}

마지막으로 Home.js라우팅이 선언 된 위치

class Home extends React.Component {
    render() {
        return (
            <div>
                <HashRouter>
                    <Switch>
                        <Route exact path="/">
                            <App />
                        </Route>
                        <Route path="/cart">
                            <Cart />
                            <Route path="/cart/checkout"  exact component={CheckoutData}/>
                        </Route>
                        <Route
                            path="/product/:id"
                            children={<SingleProduct />}
                        />
                    </Switch>
                </HashRouter>
            </div>
        );
    }
}

메리 크리스마스 여러분!