我在应用程序中使用路由时遇到了一些问题.js

<GuestRoute path="/Authenticate" element={<Authenticate />}>
</GuestRoute>

它可以和你一起工作

<Route path="/Authenticate" element={<Authenticate />}>
</Route>

但我得用客房

App.js

import "./App.css";
import {BrowserRouter as Router, Routes, Route,   Navigate } from "react-router-dom";
import React from "react"
import Navigation from "./components/shared/Navigation/Navigation";
import Home from "./Pages/Home/Home";
import Register from "./Pages/Register/Register";
import Login from "./Pages/Login/Login";
import Authenticate from "./Pages/Authenticate/Authenticate";

const isAuth = true;


function App() {
  return (
    <div className="App">
     

      <Router>
            <Navigation /> 

            {/* switch(prev. versions) ----> Routes (new versions)) */}
            <Routes>                   

                <Route exact path="/" element={<Home />} >
                </Route>
                <GuestRoute path="/Authenticate" element={<Authenticate />}>
                </GuestRoute>
                
            </Routes>

      </Router> 

    </div>
  );
}

const GuestRoute = ({children,...rest}) => {
  return(
    <Route {...rest}
    render={({location})=>{
      return isAuth ? (
       <Navigate to={{
           pathname: '/rooms',
           state: {from: location}
         }}
        />
      ):(
        children
      );
    }}
    ></Route>
  );
};

  
export default App;

推荐答案

[email protected]不使用自定义管线组件.v6中使用的新模式是包装器组件或布局布线组件.

包装器组件示例:

const GuestWrapper = ({ children }) => {
  ... guest route wrapper logic ...

  return (
    ...
    {children}
    ...
  );
};

...

<Router>
  <Navigation /> 

  <Routes>                   
    <Route path="/" element={<Home />} />
    <Route
      path="/Authenticate"
      element={(
        <GuestWrapper>
          <Authenticate />
        </GuestWrapper>
      )}
    />
  </Routes>
</Router>

布局管线组件示例:

import { Outlet } from 'react-router-dom';

const GuestLayout = () => {
  ... guest route wrapper logic ...

  return (
    ...
    <Outlet /> // <-- nested routes render here
    ...
  );
};

...

<Router>
  <Navigation /> 

  <Routes>                   
    <Route path="/" element={<Home />} />
    <Route element={<GuestLayout>}>
      <Route path="/Authenticate" element={<Authenticate />} />
      ... other GuestRoute routes ...
    </Route>
  </Routes>
</Router>

Javascript相关问答推荐

如何在嵌套的对象数组中实现搜索?

在nodejs中渲染网页时永远不会结束加载图标

如何将 Rsa 密钥对(字符串)转换为加密密钥以对数据进行签名

在悬停时为字体大小设置动画时出现闪烁问题

不适用于 React 的 JSX 条件

按 ID 查找和更新嵌套数组元素

在包装函数中添加日志(log)

在javascript中转义双引号

如何将下拉菜单与按钮对齐

像stackoverflow这样的textarea预览有

在 Javascript 中shuffle 嵌套数组

Spread Syntax 创建浅拷贝还是深拷贝?

TSX 文件无法呈现导入的 React 组件

如何使用 JavaScript 对从 JSON 数据生成的 HTML Div 使用搜索/过滤器?

如何将对象键设置为公分母?

如何将文件从表单添加到 Firebase 数据库? Vue js + Vuetify + Firebase

Minimax算法在国际象棋中不适合队友

使用下拉菜单 HTML 创建粘性导航栏

将引号包围的数组数组转换为字符串数组

Typescript 通过动态键访问和分配对象属性