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服务器上运行，所以我很高兴

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

2 个答案: