reactjs - react-router-domv5 +历史推送不渲染组件

Question

那么我想做的只是设置正确的路径重定向和路由。我已经为此设置使用了 react-router-dom 和历史记录。但是，当我使用按钮测试路由时，我可以看到 url 路径发生了变化；但它呈现空白。有谁知道这里的问题？我尝试从其他解决方案中查找，但我没有看到与现有设置有任何差异。请协助！

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./assets/styles/index.css";
import App from "./App";
import { BrowserRouter as Router } from "react-router-dom";
import * as serviceWorker from "./serviceWorker"; 

ReactDOM.render(
  <Router> 
      <App />
  </Router>,
  document.getElementById("root")
);

应用程序.js

import React from "react";
import "./assets/styles/App.css";
import Routes from './utils/routes/index.js';

function App() {
  return (
      <div className="App">
        <Routes/>
      </div>
  );
}

export default App;

路由.js

import React from "react";
import { Router, Switch, Route } from 'react-router-dom'
import MainPage from "../../pages/MainPage";
import GameDisplay from "../../pages/GameDisplay";
import history from '../history/index';

function Routes() {
    return (
      <Router history = {history}>
        <Switch>
          <Route path="/" exact component={MainPage} />
          <Route path="/GameLanding" component={GameDisplay} />
        </Switch>
      </Router>
    );
}

export default Routes;

历史.js

import {createBrowserHistory } from 'history';

const history = createBrowserHistory();

export default history;

MainPage.js（导航到其他组件的按钮）

import React from "react";
import Header from "../../components/Header";
import history from "./../../utils/history/index.js";

function MainPage() {
  const handleClick=()=>{
    history.push('/GameLanding');
    window.location.href = window.location.href; //current solution. bad way to solve it :P
  };

  return (
    <div>
      <Header />
      <div style={{ fontSize: "5vh" }}>
        <br />
        Let's play a game of Card! <br />
        <br />
        <br />
        Please enter the number of players :
        <input
          style={{
            width: "10px",
            verticalAlign: "center",
            textAlign: "center",
          }}
          type="text"
          placeholder="0"
        ></input>
        players
        <br />
        <button onClick={handleClick}> LET'S GO!</button>
      </div>
    </div>
  );
}

export default MainPage;

以下是我的错误快照： mainPage 空白渲染页面

标签： reactjsreact-router-domhistory