相关疑难解决方法(0)

我必须根据浏览历史实现一些业务逻辑.

我想做的是这样的:

reactRouter.onUrlChange(url => {
   this.history.push(url);
});

当URL更新时,有没有办法从react-router接收回调？

这是一个基本情况：我有一个带有链接的导航，以及主要内容区域中这些链接的几条路线。

const App = () => (
    <div id="page-container">
        <Nav />
        <main id="main">
            <Switch>
                <Route exact path="/" component={IndexPage} />
                <Route exact path="/blog" component={BlogPage} />
                <Route exact path="/about" component={AboutPage} />
                <Route component={NotFoundPage} />
            </Switch>
        </main>
    </div>
);

有时，当我单击导航链接时，主要内容区域会立即更新，有时可能需要 2 或 3 秒才能加载下一个组件。我相信等待的时间太长了（没有迹象表明正在加载任何东西）。

我似乎找到的只是 React Router Transitions，我尝试过，但它似乎需要一个静态timeout的过渡动画。我只希望在必要时出现加载动画；我不希望路线每次都动画。React Transition Group 似乎还要求将每条路由包装在一个Transition组件中，这需要一个location参数，而我在当前的布局中似乎没有这个参数。

这是我希望做的：

我希望在我的Page组件中添加一个布尔状态变量来跟踪loading：

class Page extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            loading: true
        };
    }
    componentDidMount() {
        this.setState({
            loading: …