React和React Router-構建后未呈現主頁組件

Question

我是React和React Router的新手，在“編譯”應用程序並嘗試在服務器上運行它后出現了一些問題。 背景：我使用create-react-app啟動該項目，並且已經在VS Code中進行開發，當我運行“ npm run start”時，一切都正確顯示在運行於localhost：3000的瀏覽器窗口中。 當我運行“ npm run build”時，它將我的文件編譯到一個build文件夾中。 當我將該文件夾的文件放入WildFly服務器上的WebContent文件夾時，沒有得到主頁的內容。

碼：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const User = ({match}) => {
  return (<h1>Welcome User {match.params.username}</h1>)
}

class App extends Component {
  render() {
    return (
      <Router>
      <div className="App">
      <ul>
      <li>
      <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/about">About</Link>
        </li>
        <li>
        <Link to="/users">User</Link>
        </li>
      </ul>
        <Route path ="/" exact render={
          () => {
            return (<h1>Welcome Home</h1>);
          }
        }/>
        <Route path ="/about" exact render={
          () => {
            return (<h1>About</h1>);
          }
        }/>
        <Route path ="/user/:username" exact component={User} />
      </div>
      </Router>
    );
  }
}

export default App;

當我登陸localhost：8080時，應該會看到“歡迎回家”文本，但是我所看到的只是切換頁面的按鈕。 這只是React Router的測試項目。 我正在為大型項目使用與此類似的東西，但是我需要主頁才能正確呈現。 任何幫助是極大的贊賞。

Answer 1

刪除關於和用戶路線中的exact信息。

Answer 2

我能夠通過合並哈希路由器來解決此問題。 這不是最好的解決方案，因為它在URL中添加了一個hash（＃），但是我的頁面將呈現在Wildfly服務器上運行，所以我很高興