react-router 切换链接时父组件重新挂载
Parent component re-mounting when react-router switching links
我有主布局组件,通常当我更改路线链接时,{this.props.child} 只需要更改。
这是我的布局组件。 index.js
<React.Fragment>
{this.props.settings.dark_overlay ? <div className="dark"></div> : ''}
<div className="site">
<Header />
<div className="sitecontent">
<div className="container flex-or">
<Content>
{this.props.children}
</Content>
{this.props.AsideType === "settings" ? null : <React.Fragment><AsideFirst /><AsideSecond /></React.Fragment>}
</div>
</div>
<Footer />
</div>
</React.Fragment>
当我构建我的应用程序时 asidefirst 从服务器获取数据,如下所示;
AsideFirst Component
constructor(props) {
super(props);
this.state = {
trends: []
}
this.handleButons = this.handleButons.bind(this)
}
handleButons(e){
let type = e.target.name
if (type === "refresh") {
this.getTrend()
}
}
componentDidMount() {
this.getTrend()
}
getTrend() {
axios.post('/api/data/title/trend')
.then(res => {
const trends = res.data;
console.log(trends)
this.setState({ trends: trends });
})
}
这里没问题...
但是,
当我更改路由组件时再次重新创建,
这是我的 app.js*
<React.Fragment>
<ReactNotification />
<Router history={history}>
<Switch>
<Route path="/" exact component={Index} />
<Route path="/kayit/" exact component={Register} />
<Route path="/giris/" exact component={Login} />
<Route path="/aktivasyon" exact component={Activation} />
<Route path="/hesap/ayarlar" exact component={AccountSettings} />
<Route path="/cikis" exact component={Logout} />
<Route path="/:string/" exact component={ComplexPush} />
<Route component={Page404} />
</Switch>
</Router>
</React.Fragment>
我的布局组件(所以 AsideFirst)在每次路由更改时从服务器获取数据,尽管路由组件是子组件。示例路由组件;
ComplexPush 组件
<Layout>
<div className="complex-header">
<Link to="/"><h4>{str}</h4></Link>
{!id ? <NoEntry /> : "" }
</div>
<Entry />
<Button variant="primary">Gönder</Button>
</Layout>
所以,Asidefirst(布局内部)在路由更改时一直挂载,尽管我的所有父组件布局。我不想要这个。我该如何解决这个问题?
假设我们有 Layout
组件。
这将是您在 Layout 组件中的路由:
<React.Fragment>
<ReactNotification />
<Router history={history}>
<Layout>
<Switch>
<Route path="/" exact component={Index} />
<Route path="/kayit/" exact component={Register} />
<Route path="/giris/" exact component={Login} />
<Route path="/aktivasyon" exact component={Activation} />
<Route path="/hesap/ayarlar" exact component={AccountSettings} />
<Route path="/cikis" exact component={Logout} />
<Route path="/:string/" exact component={ComplexPush} />
<Route component={Page404} />
</Switch>
</Layout>
</Router>
</React.Fragment>
在 Layout 中,你保持你想要保持的状态,你像 render props 一样渲染这个路由,还有像 Header 这样的所有东西......等等
我有主布局组件,通常当我更改路线链接时,{this.props.child} 只需要更改。
这是我的布局组件。 index.js
<React.Fragment>
{this.props.settings.dark_overlay ? <div className="dark"></div> : ''}
<div className="site">
<Header />
<div className="sitecontent">
<div className="container flex-or">
<Content>
{this.props.children}
</Content>
{this.props.AsideType === "settings" ? null : <React.Fragment><AsideFirst /><AsideSecond /></React.Fragment>}
</div>
</div>
<Footer />
</div>
</React.Fragment>
当我构建我的应用程序时 asidefirst 从服务器获取数据,如下所示;
AsideFirst Component
constructor(props) {
super(props);
this.state = {
trends: []
}
this.handleButons = this.handleButons.bind(this)
}
handleButons(e){
let type = e.target.name
if (type === "refresh") {
this.getTrend()
}
}
componentDidMount() {
this.getTrend()
}
getTrend() {
axios.post('/api/data/title/trend')
.then(res => {
const trends = res.data;
console.log(trends)
this.setState({ trends: trends });
})
}
这里没问题...
但是,
当我更改路由组件时再次重新创建, 这是我的 app.js*
<React.Fragment>
<ReactNotification />
<Router history={history}>
<Switch>
<Route path="/" exact component={Index} />
<Route path="/kayit/" exact component={Register} />
<Route path="/giris/" exact component={Login} />
<Route path="/aktivasyon" exact component={Activation} />
<Route path="/hesap/ayarlar" exact component={AccountSettings} />
<Route path="/cikis" exact component={Logout} />
<Route path="/:string/" exact component={ComplexPush} />
<Route component={Page404} />
</Switch>
</Router>
</React.Fragment>
我的布局组件(所以 AsideFirst)在每次路由更改时从服务器获取数据,尽管路由组件是子组件。示例路由组件;
ComplexPush 组件
<Layout>
<div className="complex-header">
<Link to="/"><h4>{str}</h4></Link>
{!id ? <NoEntry /> : "" }
</div>
<Entry />
<Button variant="primary">Gönder</Button>
</Layout>
所以,Asidefirst(布局内部)在路由更改时一直挂载,尽管我的所有父组件布局。我不想要这个。我该如何解决这个问题?
假设我们有 Layout
组件。
这将是您在 Layout 组件中的路由:
<React.Fragment>
<ReactNotification />
<Router history={history}>
<Layout>
<Switch>
<Route path="/" exact component={Index} />
<Route path="/kayit/" exact component={Register} />
<Route path="/giris/" exact component={Login} />
<Route path="/aktivasyon" exact component={Activation} />
<Route path="/hesap/ayarlar" exact component={AccountSettings} />
<Route path="/cikis" exact component={Logout} />
<Route path="/:string/" exact component={ComplexPush} />
<Route component={Page404} />
</Switch>
</Layout>
</Router>
</React.Fragment>
在 Layout 中,你保持你想要保持的状态,你像 render props 一样渲染这个路由,还有像 Header 这样的所有东西......等等