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>

Answer 2

出现问题是因为您的主页路径是 path="/"。 您的其他路由（例如：path="RegisterUser"）以相同的基本路径开始，因此路由器也在加载主页。

要纠正此问题，您可以在主页中包含“精确”。

例如：路由确切路径=“/”组件={主页}

这将与其他路径区分开来，然后 RegisterUser 将加载得很好。