как отобразить компонент без родителя во вложении маршрута реакции - PullRequest
Новая
       15

как отобразить компонент без родителя во вложении маршрута реакции

0 голосов
/ 15 марта 2020

Я не могу найти в предыдущих вопросах, поэтому я спрашиваю здесь. Когда я нахожусь в компоненте «Учетная запись» и когда я нажимаю кнопку «Корзина» в заголовке, он переходит к компоненту «Корзина», но я хочу отобразить компонент без родителя («Учетная запись»). Что я могу сделать? Я хочу, чтобы это было https://imgur.com/Ia0zgty

Приложение содержит Route's 

class App extends React.Component{
    render() {
        return (
            <BrowserRouter >
                    <div>
                        <Switch>
                            <Route exact path="/">
                                <Login/>
                            </Route>
                            <Route  path="/account">
                                <Account/>
                            </Route>
                        </Switch>
                    </div>
            </BrowserRouter>
        );
    }
}
export default App;

class Login extends React.Component{
    render() {
        return (
            <div>
                Component Login
                <br/>
                <button onClick={() => this.props.history.push("/account")}>Go to account!</button>
            </div>
        );
    }
}
export default withRouter(Login);

Учетная запись также содержит Route : 

class Account extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            user : "Alex"
        }
    }
    render() {
        return (
            <div>
                <Header/>
                <h1>Account</h1>
                <Switch>
                    <Route path="/account/cart">
                        <Cart user={this.state.user}/>
                    </Route>
                </Switch>
            </div>
        );
    }
}
export default withRouter(Account);

class Cart extends React.Component{
    render() {
        return (
            <div>
                Cart, hello {this.props.user}
            </div>
        );
    }
}
export default withRouter(Cart);

class Header extends React.Component{
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
        this.goToCart = this.goToCart.bind(this);
        this.goToAccount = this.goToAccount.bind(this);
    }
    handleClick(){
        this.props.history.push("/");
    }
    goToCart(){
        this.props.history.push("/account/cart");
    }
    goToAccount(){
        this.props.history.push("/account");
    }
    render() {
        const styleHeader = {
            padding: 20,
        };
        const bt = {
            marginRight: 40
        };
        return (
            <div style={styleHeader}>
                <button style={bt} onClick={this.goToAccount}>Account</button>
                <button style={bt} onClick={this.goToCart}>Cart</button>
                <button style={bt} onClick={this.handleClick}>Log out</button>
            </div>
        );
    }
}
export default withRouter(Header);
...