У меня есть три компонента:
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')
);
Есть два компонента, которые мапятся на два урла, как сделать так, чтобы третий компонент рендерился отдельно, при нажатии на что-нибудь(кнопка или ссылка), чтобы урл не менялся. То есть отрендерился другой компонент, а адрес остался тот же.