我在应用程序中使用路由时遇到了一些问题.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;

推荐答案

react-router-dom@6不使用自定义管线组件.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相关问答推荐

使用axios.获取实时服务器时的404响应

MongoDB中的引用

使用LocaleCompare()进行排序时,首先使用大写字母

NG/Express API路由处理程序停止工作

为什么客户端没有收到来自服务器的响应消息?

搜索功能不是在分页的每一页上进行搜索

在Odoo中如何以编程方式在POS中添加产品

React Refs不与高阶组件(HOC)中的动态生成组件一起工作

使用createBrowserRoutVS BrowserRouter的Reaction路由

为什么在运行于<;img>;事件处理程序中的JavaScript中x和y是不可变的?

如何在Web项目中同步语音合成和文本 colored颜色 更改

我如何才能获得价值观察家&对象&S的价值?

AstroJS混合模式服务器终结点返回404

如何调整下拉内容,使其不与其他元素重叠?

使用Java脚本在div中创建新的span标记

如何将值从后端传递到前端

Rails 7:在不使用导入映射的情况下导入Java脚本

如何导入我在Web Worker创建的函数?

如何在Angular中运行没有哈希的项目

类型脚本类型声明未按预期工作