时间戳

首页 > 解决方案 > React 和 React Router - 构建后主页组件未呈现

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

问题描述

我是 React 和 React Router 的新手，在“编译”我的应用程序并尝试在我的服务器上运行它之后遇到了一些问题。背景：我使用 create-react-app 启动这个项目并一直在 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 的一个测试项目。我希望将与此类似的东西用于更大的项目，但我需要主页才能正确呈现。任何帮助是极大的赞赏。

标签： javascriptreactjsreact-router-v4

解决方案

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

推荐阅读