Question

尝试使用react-router-dom的Redirect进行重定向时遇到问题。重定向后，尽管地址栏中的url正确，但未加载任何内容。只有在刷新页面后才会加载。

我正在使用自定义的Route组件，因为我需要一个isPrivate属性来告诉何时限制对页面的访问才能进行重定向。

这是我的src / routes / index.js：

import React from 'react';
import { Switch } from 'react-router-dom';
import Route from './Route';

import SignIn from '../pages/SignIn';

import Dashboard from '../pages/Dashboard';

export default function Routes() {
  return (
    <Switch>
      <Route path="/" exact component={SignIn} />

      <Route path="/dashboard" component={Dashboard} isPrivate />
    </Switch>
  );
}

这是我的src / routes / Route.js：

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

export default function RouteWrapper({
  component: Component,
  isPrivate,
  ...rest
}) {
  const signed = false;

  if (!signed && isPrivate) {
    return <Redirect to="/" />;
  }

  if (signed && !isPrivate) {
    return <Redirect to="/dashboard" />;
  }

  return <Route {...rest} component={Component} />;
}

这是src / App.js：

import React from 'react';
import { Router } from 'react-router-dom';

import history from './services/history';
import Routes from './routes';

function App() {
  return (
    <Router history={history}>
      <Routes />
    </Router>
  );
}

export default App;

我还通过在浏览器中检查React组件树来注意到，重定向后，它没有完全加载组件树，如下图所示： after redirect 和 after reload or just regular load

如何在重定向后正确显示页面？任何帮助将不胜感激

Answer 1

似乎'react-router-dom'的{{1}}并不能代替在路由中包含Router的需要，路由实际上是同步UI和URL的组件。

在BrowserRouter中

将src/routes/index.js中的<Switch>括起来即可解决问题：

<BrowserRouter>

重定向后页面内容未加载-React Web App

1 个答案: