为什么我的组件在同一页面中呈现？答案

【问题标题】：Why is my component being rendered in the same page?为什么我的组件在同一页面中呈现？
【发布时间】：2022-11-23 05:05:40
【问题描述】：

我有一个带有按钮的登陆页面，该按钮是 Link 到 Register 组件，但是当我单击按钮时，我的 Register 组件位于我的登陆页面下方，而不是在新页面中。为什么会这样？

应用程序.js：

import './App.css';
import { Fragment } from 'react';
import Navbar from './components/layout/Navbar';
import Landing from './components/layout/Landing';
import Register from './components/auth/Register';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';



function App() {
  return (
    <div className="App">
      <Router>
        <Fragment>
          <Navbar/>
          <Landing/>
          <Routes>
            <Route path='/register' element={<Register />} />
          </Routes>
        </Fragment>
      </Router>
    </div>
  );
}

export default App;

import React from 'react'

const Register = () => {
  return (
    <section className="container">
      <h1 className="large text-primary">Sign Up</h1>
      <p className="lead">
        <i className="fas fa-user" /> Create Your Account
      </p>
      <form className="form" >
        <div className="form-group">
          <input
            type="text"
            placeholder="Name"
            name="name"
            
          />
        </div>
        <div className="form-group">
          <input
            type="email"
            placeholder="Email Address"
            name="email"
            
          />
          <small className="form-text">
            This site uses Gravatar so if you want a profile image, use a
            Gravatar email
          </small>
        </div>
        <div className="form-group">
          <input
            type="password"
            placeholder="Password"
            name="password"
            
          />
        </div>
        <div className="form-group">
          <input
            type="password"
            placeholder="Confirm Password"
            name="password2"
            
          />
        </div>
        <input type="submit" className="btn btn-primary" value="Register" />
      </form>
      <p className="my-1">
        
      </p>
    </section>
  )
}

export default Register

所以我的/路径是一个带有登陆页面组件的导航栏，当我点击按钮时，我的路径变成/register但是带有导航栏的登陆页面仍在呈现，我的注册组件也在其他组件之下。

【问题讨论】：

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

Landing 组件未在路由上呈现。换句话说，它总是被渲染。如果你想有条件地渲染 Landing 然后为它创建一个路由并在那里渲染它。

例子：

function App() {
  return (
    <div className="App">
      <Router>
        <Navbar />
        <Routes>
          <Route path="/" element={<Landing />} />
          <Route path='/register' element={<Register />} />
        </Routes>
      </Router>
    </div>
  );
}

【讨论】：

【解决方案2】：

React Router 的工作方式是根据路由和 Route 元素将 Routes 元素替换为相应的元素。 Routes 元素所在页面的其余部分不会改变。

由于您的着陆页元素直接位于 App 组件内，因此无论路由如何，它都会始终呈现。要更改它，请将其替换为 Routes 组件内的 Route 元素，该元素在其路由中显示着陆页。

【讨论】：