React和React Router-主页组件在构建后未呈现

Question

我是React和React Router的新手，在"编译"我的应用程序并尝试在服务器上运行它后，我遇到了一些问题。背景：我使用create-react应用程序启动了这个项目，并且一直在VS Code中进行开发，当我运行"npm-run-start"时，所有内容都在localhost:3000上运行的浏览器窗口中正确显示。当我运行"npm-run-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

删除about和用户路由中的exact。

Answer 2

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