Смена роутинга для компонентов

224

11 мая 2019, 01:20

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

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')
);

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

Answer 1

// ./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;