reactjs - React Js 和 Spring Boot

Question

我在一个项目中使用了 java 的 React 代码和 Spring boot 代码，我使用前端 maven 插件将其全部放置。

我的 pom.xml 的一部分

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>1.12.0</version>
                <executions>
                  <execution>
                    <id>install node and npm</id>
                    <goals>
                      <goal>install-node-and-npm</goal>
                    </goals>
                    <phase>generate-resources</phase>
                  </execution>
                  <execution>
                    <id>npm install</id>
                    <goals>
                      <goal>npm</goal>
                    </goals>
                    <phase>generate-resources</phase>
                    <configuration>
                      <arguments>install</arguments>
                    </configuration>
                  </execution>
                  <execution>
                    <id>npm build</id>
                    <goals>
                      <goal>npm</goal>
                    </goals>
                    <phase>generate-resources</phase>
                    <configuration>
                      <environmentVariables>
                        <CI>true</CI>
                      </environmentVariables>
                      <arguments>run build</arguments>
                    </configuration>
                  </execution>
                </executions>
                <configuration>
                  <workingDirectory>frontend</workingDirectory>
                  <nodeVersion>v15.14.0</nodeVersion>
                </configuration>
              </plugin>
        </plugins>
        
            <finalName>A-nine-web</finalName>
            <resources>
              <resource>
                <directory>${project.basedir}/frontend/build</directory>
                <filtering>false</filtering>
                <targetPath>public/</targetPath>
              </resource>
              <resource>
                <directory>${project.basedir}/src/main/resources</directory>
                <filtering>false</filtering>
              </resource>
            </resources>
    </build>

---

当我在前端运行 npm start 时，当我点击我的 webapp 中的链接时，我可以看到所有的变化。

这是我的应用程序中导航栏的 React 代码，其中包含导航链接：

import {BrowserRouter as Router} from 'react-router-dom';
import { Route, Switch } from 'react-router';
import home from '../Home/home';
import Notification from '../Notifications/Notifications';
import WishList from '../WishList/WishList';
import Orders from '../Orders/Orders'; 

const TopBar = () =>{

    const links = [
        {
            id:0,
            Title:'Home',
            url:'/home',
            faClass:'fas fa-home'
        },  {
            id:1,
            Title:'Notifications',
            url:'/Notifications',
            faClass:'fas fa-bell'
        }, {
            id:0,
            Title:'My Orders',
            url:'/Orders',
            faClass:'fas fa-money-check'
        }, {
            id:0,
            Title:'My Wishlist',
            url:'/Wishlist',
            faClass:'fas fa-hands'
        }
    ];

    return(
        <Router>
        <div className="TopBar">
             <div id="drop-down">
               <svg width="12px" height="12px" >
               <path d="M 0 0 L6 6 L12 0 Z" style={{stroke:'#000',fill:'gray'}}/>
               </svg>
             </div>
             <div id="search-bar">
                 <form>
                     <div className="search-area">
                     <input type="search" placeholder="Search Cakelight" />
                     <button type="submit">
                         <i className="fas fa-search"></i>
                         
                     </button>
                     </div>
                 </form>
             </div>
             
           <div className="navigation">
             {
                links.map((link)=>(
                    <div className="navigation_item">
                        <i className={link.faClass}>i</i>
                            <ul>
                                <a href={link.url}>
                                <li key={link.id}>{link.Title}</li>
                                </a>
                            </ul>
                            </div>
                ))  
              }        
                </div>

                <div className="acc-management">
                <i class="fas fa-user-circle">i</i>
                    </div>
                   
        </div>
        <div>
            <Switch >
                <Route exact path="/home" component={home}/>
                <Route exact path="/Notifications" component={Notification}/>
                <Route exact path="/WishList" component={WishList}/>
                <Route exact path="/Orders" component={Orders}/>
            </Switch>
        </div>
        </Router>
    )
}

export default TopBar;

当我使用 npm start 运行前端时，所有链接都指向正确的路径，但是当我运行 maven 时，链接返回一个 whitelabel 错误页面。

请，如果有人有解决方案，请帮助我。我会很感激的。``

标签： reactjsspring-bootmaven