У меня есть компоненты дерева:
class Home extends Component {
render() {
return (
<div>
<h2>Home</h2>
</div>
);
}
}
class Task extends Component {
render() {
return (
<div>
<h2>Task</h2>
</div>
);
}
}
class User extends Component {
render() {
return (
<div>
<h2>User</h2>
// <Link to='/task'>???</Link>
</div>
);
}
}
И у меня index.js:
ReactDOM.render(
<BrowserRouter>
<Switch>
<Route exact path='/' component = {Home} />
<Route path='/user' component = {User} />
</Switch>
</BrowserRouter>,
document.getElementById('root')
);
Есть два компонента, которые сопоставляются с двумя URL-адресами: как сделать третий компонент визуализированным отдельно, когда вы нажимаете на что-то (кнопку или ссылку), чтобы URL-адрес не изменялся. То есть был отрисован другой компонент, а адрес остался прежним.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вам следует взглянуть на этот пост SO, я думаю, он может вам помочь.
Перейдите к компоненту без изменения URL-адреса в ReactJS
Вы должны создать функцию, которая привязывается к конструктору и объявляет состояние, чтобы определить, показывать ли вашу вторую страницу или нет (true || false)
import React, {Component} from 'react'
import MyComponent3 from './MyComponent3.jsx'
export default class MyComponent2 extends Component {
constructor () {
super()
this.handleOnClick = this.handleOnClick.bind(this)
this.state = { show : false}
}
handleOnClick () {
this.setState({show:true})
}
render () {
return (
<div>
<button onClick = {this.handleOnClick()}>Submit Me</button>
{ this.state.show && <MyComponent3/> }
</div>
)
}
}
Если есть что-то, что вам все еще непонятно, дайте мне знать.