Javascript React和React路由器-生成后未呈现主页组件

我对React和React路由器是新手，在我“编译”我的应用程序并尝试在我的服务器上运行它之后，我遇到了一些问题。 背景：我使用CreateReact应用程序启动这个项目，并一直在VS代码中开发，当我运行“npm run start”时，所有内容都正确地显示在localhost:3000上运行的浏览器窗口中。当我运行“npm运行构建”时，它会将我的文件编译到构建文件夹中。当我将该文件夹的文件放入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;

import React，{Component}来自'React'；
从“/logo.svg”导入徽标；
导入“/App.css”；
从“react Router dom”导入{BrowserRouter as Router，Route，Link}；
常量用户=（{match}）=>{
返回（欢迎用户{match.params.username}）
}
类应用程序扩展组件{
render（）{
返回(


家


关于


使用者


{
返回（欢迎回家）；
}
}/>
{
返回（大约）；
}
}/>
);
}
}
导出默认应用程序；

---

当我登陆localhost:8080时，我应该看到“欢迎回家”文本，但我看到的只是切换页面的按钮。这只是React路由器的一个测试项目。我正在寻找使用类似的东西为一个更大的项目，但我需要主页正确呈现。非常感谢您的帮助。

在about和user route中删除

exact

。

我通过合并哈希路由器解决了这个问题。这不是最好的解决方案，因为它在url中添加了一个散列（#），但我的页面将在Wildfly服务器上运行，因此我很高兴

你的live页面的url是什么？按钮，你的意思是代码中的链接标记是可见的吗？是的按钮，我的意思是链接标记，很抱歉。至于live页面，我目前没有一个活动页面，但如果有帮助的话，我可以提供我的页面。我对这种行为感到困惑，因为我正在遵循react路由器的教程：