react-router-domv5 +历史记录推送不呈现组件

问题描述

我要尝试做的只是设置正确的路径重定向和路由。我已经为这个设置使用了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")
);

App.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;

Route.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;

history.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 blank rendered page

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）