反应路由器 - 页面在我刷新浏览器之前不会呈现答案

【问题标题】：React router - page does not render until I do a browser refresh反应路由器 - 页面在我刷新浏览器之前不会呈现
【发布时间】：2020-12-02 19:52:56
【问题描述】：

我试图将我的组件进一步解耦，但我遇到了这个奇怪的错误。我掩盖了其他一般进口。所有组件都正确导入并正常工作。

发生的情况是我登陆“/”，然后我单击一个按钮导航到仪表板，它是一个空白页面（URL 确实发生了变化）。然后我在浏览器中点击刷新并显示正确的组件。如果我返回登录页面，也会发生这种情况；在我刷新之前它是空白的。

在我的应用组件中

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

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

我的历史组件（超级简单）

import { createBrowserHistory} from 'history';

const history = createBrowserHistory();

export default history;

最后是我的路线：

import Landing from "../pages/landing/landing.page"
import Dashboard from "../pages/dashboard/dashboard.page.jsx"

export default function Routes() {
  return (
    <Switch>
      <Route path="/" exact component={Landing}/>
      <Route path="/dashboard" component={Dashboard}/>
    </Switch>
  );

这是我的登陆页面，我点击按钮导航到“/dashboard”

import { Link } from "react-router-dom";

function Landing () {
  return (
    <div class="landing-container">
      <Link to="/dashboard"><button> Setup Tests </button></Link>

    </div>
  ) 
}

export default Landing;

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

您现在似乎正在使用来自react-router-dom 的Router。据我了解，就浏览器使用而言，您必须导入BrowserRouter。所以你的代码看起来像：

import { BrowserRouter } from "react-router-dom";

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

【讨论】：