I am in the process of developing a React application. Here are the dependencies I am currently using:
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",
(I am also incorporating SemanticUI as my UI framework)
This is how I have initialized the application:
export const startup = async () => {
const history: History = createBrowserHistory();
const rootStore: RootStore = await RootStore.build(history);
const app = <App history={history} rootStore={rootStore}/>;
return { rootStore, app }
}
I have three components set up:
- The Index component:
startup().then(x => {
const root = document.getElementById('root');
console.log(x);
const history = x.rootStore.history;
reactRender(
<>
<BrowserRouter>
<Provider history={x.rootStore.history} rootStore={x.rootStore}>
<Router history={history}>
<Route exact path='/' component={HomePage}/>
<Route exact path='/about' component={AboutComponent}/>
</Router>
</Provider>
</BrowserRouter>
</>,
root
);
}).catch(e => {
console.log(e);
alert('Unable to initialize the application')
})
- The Home page component:
export interface HomePageProps {
rootStore?: RootStore;
}
class HomePage extends React.Component<HomePageProps> {
public constructor(props: HomePageProps) {
super(props);
}
public render() {
return (
<>
<h2>Home</h2>
<Button onClick={this.handler}>
Go to about
</Button>
</>
)
}
public handler = () => {
this.props.rootStore?.history!.push('/about');
console.log(this.props.rootStore?.history);
}
}
export default inject('rootStore')(observer(HomePage))
- The About component:
export interface AboutComponentProps {
rootStore?: RootStore;
}
class AboutComponent extends React.Component<AboutComponentProps> {
public constructor(props: AboutComponentProps) {
super(props);
}
public render() {
return (
<>
<h2>About</h2>
<Button onClick={this.handler}>
Go to home
</Button>
</>
);
}
public handler = () => {
this.props.rootStore?.history!.push('/');
}
}
export default inject('rootStore')(observer(AboutComponent))
After clicking "Go to home" or "Go to about", the URL changes in the browser address bar but the new component is not rendered. Is this a bug in the new version? Or is there a way to solve it?
P/S You can check this bug in CodeSandbox. https://codesandbox.io/s/gallant-gates-9gkuf