javascript - React App 加载 HomePage 而不是 Desired Page

Question

我对 React 和 Web 开发很陌生，所以请耐心等待。
我正在使用 React 和 Flask 构建一个简单的 Web 应用程序。
我想我可以使用来自 Users.js 文件的代码作为开发 registerUser.js 脚本的基础，因为我需要代码的某些部分。
我用以前的脚本完成了这个，只是相应地改变了声明(exp:export const ClassName = () => { } )
但它会加载主页。我想可能有一个错误阻止它正确加载，但我删除了所有信息并只留下了一些文本，但它不会加载此页面 (registeruser.js) 而是加载主页。
什么可能阻止它加载？我查看了浏览器，地址是正确的(http://localhost:3000/registerUser)
这是我当前无法加载的代码:

import React, { useState, useEffect, useRef, Fragment } from "react";

const API = process.env.REACT_APP_API;

export const RegisterUser = () => (
 <Fragment>
   <div className="row">
     <h1>TEST TEXT</h1>
   </div>
   <div className="row">
     <br></br>
   </div>
   <div className="row">
     <h3>PLEASE LOAD</h3>
   </div>
 </Fragment>
 );

我正在从导航栏加载代码

import React from 'react'
import {Link} from 'react-router-dom'

export const Navbar = () => (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
    <Link className="navbar-brand" to="/">POLL ME APP</Link>
    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span className="navbar-toggler-icon" />
    </button>
    
    <div className="collapse navbar-collapse" id="navbarNav">
      <ul className="navbar-nav">
        <li className="nav-item">
          <Link className="nav-link" to="/registerUser">Register</Link>
        </li>
      </ul>
    </div>
    //other links

它是在 App.js 中声明的

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import './App.css';


 //other imports
import { Registers } from "./components/Registers";

function App() {
 return (
    <Router>
      <Navbar />
      <div className="container p-4">
        <Switch>
          //other components
          <Route path="/RegisterUser" component={RegisterUser} />
        </Switch>
      </div>
    </Router>
  );
}


export default App;

Answer 1

问题
使用 Switch 时组成路由路径顺序和特殊性很重要。我怀疑您将主页呈现为不太具体的路径，例如“/”，并且在更具体的路径“/RegisterUser”上方可以看到它。

<Router>
  <Navbar />
  <div className="container p-4">
    <Switch>
      <Route path="/" component={HomePage} />
      //other components
      <Route path="/RegisterUser" component={RegisterUser} />
    </Switch>
  </div>
</Router>

Switch组件返回并呈现 第一 匹配它找到的路径“/”是所有路径的路径前缀，因此如果在您真正想要呈现的路径之前找到它，它将成为返回的路径。
解决方案
从 订购路径更多 特定于 少具体到让他们有机会首先被匹配和呈现。

<Router>
  <Navbar />
  <div className="container p-4">
    <Switch>
      //other components
      <Route path="/RegisterUser" component={RegisterUser} />
      <Route path="/" component={HomePage} />
    </Switch>
  </div>
</Router>