使用 history.push 后反应路由器不渲染组件

Question

我正在开发 React 应用程序。我正在使用这个依赖项：

"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",

（对于 ui 框架，我使用的是 SemanticUI）

我是这样初始化应用程序的

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 }
}

我有三个组成部分：

索引组件

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('can not initialize application')
})

主页组件

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 about
                </Button>
            </>
        )
    }

    public handler = () => {
        this.props.rootStore?.history!.push('/about');
        console.log(this.props.rootStore?.history);
    }

}

export default inject('rootStore')(observer(HomePage))

关于组件

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))

在我点击“返回主页”或“转到大约”后，浏览器地址栏中的 url 发生了变化，但新组件未发生变化（未呈现）

这是新版本的bug？或者这可以以某种方式解决？

P/S 你可以在 codesandbox 中检查这个错误。 https://codesandbox.io/s/gallant-gates-9gkuf

Answer 1

所以。创建历史实例和使用路由器组件的方式不再需要。举个例子。

索引组件

const rootElement = document.getElementById('root');
ReactDOM.render(
  <StrictMode>
    <BrowserRouter>
      <Switch>
        <Route exact path="/home">
          <HomeComponent />
        </Route>
      </Switch>
    </BrowserRouter>
  </StrictMode>,
  rootElement
);

这里是一个测试组件

import React from 'react';
import { RouteComponentProps, withRouter } from 'react-router';

interface HomeProps extends RouteComponentProps {}

class HomeComponent extends React.Component<HomeProps> {
  public render() {
    return (
      <>
        <h1>Home page</h1>
        <button onClick={() => this.props.history.push('/component')}>
          go to component
        </button>
      </>
    );
  }
}

export default withRouter(HomeComponent);

使用 history.push 后反应路由器不渲染组件

React router not render component after using history.push

typescript

react-router

react-router-dom

mobx

mobx-react