如何在反应路由器 v6 中呈现新页面而不添加其他组件？

Question

我在登录页面中有一个登录按钮 当我单击登录按钮时，组件会在登录页面中呈现。我想要做的是渲染一个新页面我如何使用 react-router v6 来做到这一点？

我正在创建商店应用 这是我的 App.js

import Header from "./components/Header";
import Intro from "./components/Intro";
import Shelf from "./components/Shelf";

function App() {
  return (
    <div>
      <Header />
      <Intro />
      <Shelf />
    </div>
  );
}

export default App;

这是介绍组件：

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Login from './Login';
import Signup from './Signup'

function Intro() {

return (
    <div className="hero">
        <div className="overlay column ai-center js-center">
            <h1 className="m-0 fs-large"><em>Welcome to Furns</em></h1>
            <hr />
            <p className="m-0 fs-small">Worlwide known company serves the best furnitures</p>
            <div className="row mt-4">
                <Router>

                   
                        <Routes>
                            <Route path="/login" element={<Login />} />
                            <Route path="/signup" element={<Signup />} />
                        </Routes>
                    
                    <Link to="/login">
                        <button className="login-btn-large px mx-3">Login</button>
                    </Link>
                    <Link to="/signup" >
                        <button className="sign-up-btn">Sign-up</button>
                    </Link>
                </Router>
            </div>
        </div>
    </div>


);
}

export default Intro;

这是我的登录组件：

import React from 'react';

function Login() {

return (
  
        <div className="float shadow bg-light px-3 py-3 ai-center js-between">
            <h2 className="brand color-olive">Furns</h2>
            <h1 className="color-olive">Login</h1>
            <form className="column">
                <label htmlFor="username" className="color-olive my-1"> Username</label>
                <input id="username" type="text" className="txt-box" />

                <label htmlFor="password" className="color-olive my-1">Password </label>
                <input id="password" type="password" className="txt-box" />


                <button type="submit" className="mt-4 olive login-btn-large">Login</button>
                <button className="my-1 olive bg-light btn-cancel" >Cancel</button>

            </form>

        </div>
    
);
}

    export default Login;

这是我点击登录按钮时的样子

Login Component

Answer 1

如果我正确理解您的问题和代码，Intro 就是您所称的着陆页，并且您希望它链接到其他页面。

为此，我建议进行此重构：

1. 在当前正在渲染Intro 的App 中渲染Router 和路由。
2. 专门为着陆介绍页创建一条新路线。

应用程序

function App() {
  return (
    <Router>
      <div>
        <Header />
        <Routes>
          <Route path="/" element={<Intro />} />
          <Route path="/login" element={<Login />} />
          <Route path="/signup" element={<Signup />} />
        </Routes>
        <Shelf />
      </div>
    </Router>
  );
}

简介

function Intro() {
  return (
    <div className="hero">
      <div className="overlay column ai-center js-center">
        <h1 className="m-0 fs-large"><em>Welcome to Furns</em></h1>
        <hr />
        <p className="m-0 fs-small">Worlwide known company serves the best furnitures</p>
        <div className="row mt-4">
          <Link to="/login">
            <button className="login-btn-large px mx-3">Login</button>
          </Link>
          <Link to="/signup" >
            <button className="sign-up-btn">Sign-up</button>
          </Link>
        </div>
      </div>
    </div>
  );
}

如果您不希望或不需要 Header 和/或 Shelf 组件在所有页面上呈现，那么您可以将它们抽象为布局包装器组件，然后呈现 Outlet 用于包装的路由到渲染成。

const PageLayout = () => (
  <div>
    <Header />
    <Outlet />
    <Shelf />
  </div>
);

...

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Intro />} />
        <Route path="/*" element={<PageLayout />} >
          <Route path="/login" element={<Login />} />
          <Route path="/signup" element={<Signup />} />
        </Route>
      </Routes>
    </Router>
  );
}