I'm making a program using the react-router-dom library now.
However, if the URL of the site is changed using the tag, the existing observer does not work and the following error message is output.
The reactive render of an observer class component (TCEditContainer) was overriden after MobX attached. This may result in a memory leak if the overriden reactive render was not properly disposed.
Can you tell me why this warning is happening and how to fix it?
The code below is how to navigate the page using my URL and the render function.
class App extends React.Component {
render() {
return (
<Container className="App">
<Nav/>
<Switch>
<Route exact path="/" component={MainView}/>
<Route path="/club">
<Grid container xs={12} spacing={3}>
<Grid item/>
<Grid item xs={12}>
<TCEditContainer/>
</Grid>
<Grid item xs={12}>
<TCListContainer/>
</Grid>
</Grid>
</Route>
<Route path="/member">
<Grid container xs={12} spacing={3}>
<Grid item/>
<Grid item xs={12}>
<MemberEditContainer />
</Grid>
<Grid item xs={12}>
<MemberListContainer />
</Grid>
</Grid>
</Route>
<Route component={() => <h2>Page Not Found</h2>}/>
</Switch>
</Container>
);
}
}
This is the page you navigated to using the tag above.
@inject("TCStore")
@autobind
@observer
class TCEditContainerextends Component<any, any> {
...
render() {
...
return (
<TCEditView
...
/>
);
}
}