2

У меня есть три компонента:

import React, {Component} from 'react';

class Home extends Component {

    render() {
        return (
            <div>
                <h2>Home</h2>
            </div>
        );
    }

}

export default Home;

import React, {Component} from 'react';

class Task extends Component {

    render() {
        return (
            <div>
                <h2>Task</h2>
            </div>
        );
    }

}

export default Task;

import React, {Component} from 'react';
import { Link } from 'react-router-dom';

class User extends Component {

    render() {
        return (
            <div>
                <h2>User</h2>
               // <Link to='/task'>???</Link>                
            </div>
        );
    }

}

export default User;

И мой index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Route, BrowserRouter, Switch } from 'react-router-dom';

import Home from './components/Home';
import User from './components/User';

ReactDOM.render(
    <BrowserRouter>
        <Switch>
            <Route exact path='/' component={Home} />
            <Route path='/user' component={User} />
        </Switch>
    </BrowserRouter>, 
    document.getElementById('root')
);

Есть два компонента, которые мапятся на два урла, как сделать так, чтобы третий компонент рендерился отдельно, при нажатии на что-нибудь(кнопка или ссылка), чтобы урл не менялся. То есть отрендерился другой компонент, а адрес остался тот же.

1 ответ 1

0

// ./src/Home
import React, {Component} from 'react';

class Home extends Component {

    render() {
        return (
            <div>
                <h2>Home</h2>
            </div>
        );
    }

}

export default Home;

// ./src/Task
import React, {Component} from 'react';

class Task extends Component {

    render() {
        return (
            <div>
                <h2>Task</h2>
            </div>
        );
    }

}

export default Task;

// ./src/User
import React, {Component} from 'react';
import Task from "./Task"

class User extends Component {
    constructor() {
        super();
        
        this.state = {
            showTask: false
        };
        
        this.toggleTaskShow = this.toggleTaskShow.bind(this);
    }
    
    toggleTaskShow() {
        this.setState({
            showTask: !this.state.showTask
        })
    }

    render() {
        const { showTask } = this.state;
        
        return (
            <div>
                {
                    showTask? (
                        <Task />
                    ) : (
                        <h2>User</h2>
                    )
                }
                <button onClick={this.toggleTaskShow}>Task</button>
            </div>
        )
    }

}

export default User;

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.