反應路由器 - 頁面在我刷新瀏覽器之前不會呈現

Question

我試圖將我的組件進一步解耦，但遇到了這個奇怪的錯誤。 我掩蓋了其他一般進口。 所有組件都正確導入並正常工作。

發生的情況是我登陸“/”，然后我單擊一個按鈕導航到儀表板，它是一個空白頁面（URL 確實發生了變化）。 然后我在瀏覽器中點擊刷新並顯示正確的組件。 如果我 go 返回我的登錄頁面，也會發生這種情況； 在我刷新之前它是空白的。

在我的應用組件中

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;

Answer 1

看起來您現在正在使用來自react-router-dom Router 據我了解，您必須在瀏覽器使用方面導入BrowserRouter 。 所以你的代碼看起來像：

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

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