时间戳

首页 > 解决方案 > React Router 5 中的 Redirect 成功重定向，但不渲染子组件

reactjs - React Router 5 中的 Redirect 成功重定向，但不渲染子组件

问题描述

我已经更改了我的应用程序中的路线，如果任何用户已将旧路线的网址添加为书签，我已经添加了一些对新路线的重定向。他们中的大多数都工作正常，但是这个不是 -

应用程序.tsx

import { Router } from 'react-router-dom';
import Routes from './Routes';
import history from './history';

const App: FunctionComponent = () => (
  <Router history={history}>
    <Routes />
  </Router>
);

export default App;

RouteSwitch.txt

import React, { FunctionComponent } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';

const RouteSwitch: FunctionComponent = () => {
  return (
    <Switch>
      <Redirect exact from="/documents" to="/documents/list" />
      <Route exact path="/documents/list">
        <DocumentsContainer />
      </Route>
    </Switch>
  );
};

export default RouteSwitch;

/documents从to的重定向/documents/list工作，但是DocumentsContainer不会被渲染。如果我直接请求/documents/list，那么它会很好。就好像<Switch>找到了它的第一个匹配项（重定向），然后决定它的工作已经完成。我尝试将push道具添加到重定向，但没有任何区别。

我的示例与 React 培训网站上给出的示例非常相似 - https://reacttraining.com/react-router/web/api/Redirect/from-string

想法？

标签： reactjsreact-router

解决方案

问题已解决 -DocumentsContainer组件实际上正在渲染，但由于使用重定向导致加载程序计数增加 1（但不减少）导致加载程序计数不返回 0 到允许从 Redux 加载文档数据并渲染内容。

推荐阅读