[英]Change routing for components
我有树组件:
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不变。 即,呈现了另一个组件,并且地址保持不变。
您应该看一下此SO Post,我认为它可以为您提供帮助。
您应该创建一个绑定到构造函数的函数,并声明一个状态以确定是否显示第二页(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>
)
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.