寻找一些关于重定向的帮助.下面是代码片段.

Index.js

const router = createBrowserRouter([

  {
    //set App as root element...
    path: "/",
    loader: () => {

    },
    element: <App/>,
    errorElement: <ErrorPage/>,

    //set routes for child elements...
    children: [
      {
        path: "/home",
        element: <Home/>
      },
      {
        path: "/about",
        element: <About/>,
        errorElement: <ErrorPage/>
      },  
      {
        path: "/blog",
       element: <Blog/>,
       errorElement: <ErrorPage/>
      },
      {
        path: "/services",
        element: <Services/>,
        errorElement: <ErrorPage/>
      }

    ]
  }
])

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
    {/* <App /> */}
  </React.StrictMode>
);

App.js

import React from "react";
import { BrowserRouter, Outlet, redirect, Route, Routes } from "react-router-dom";
import Navbar from "./components/Navbar";
import Home from "./views/Home";


function App() {

  return (

    <div className="App">
      <Navbar/>
      <Outlet/> 
    </div>
  );
}

export default App;

我所要做的就是在页面加载时将页面从‘localhost:3000/’作为根重定向到‘localhost:3000/home’,这样我就可以呈现应用程序主页.在我使用插座的地方,我希望它在那里渲染,并让导航栏始终渲染.我在文档中没有看到createBrowserRouter的重定向选项.

推荐答案

可以通过Navigate组件和replaceprops 渲染从"/""/home"的重定向.

示例:

const router = createBrowserRouter([
  {
    //set App as root element...
    path: "/",
    loader: () => { ... },
    element: <App />,
    errorElement: <ErrorPage />,

    //set routes for child elements...
    children: [
      {
        index: true, // <-- match on parent, i.e. "/"
        element: <Navigate to="/home" replace /> // <-- redirect
      },
      {
        path: "/home",
        element: <Home />
      },
      {
        path: "/about",
        element: <About />,
        errorElement: <ErrorPage />
      },  
      {
        path: "/blog",
       element: <Blog />,
       errorElement: <ErrorPage />
      },
      {
        path: "/services",
        element: <Services />,
        errorElement: <ErrorPage />
      }
    ]
  }
]);

Javascript相关问答推荐

如何从JSON数组添加Google Maps标记—或者如何为数组添加参数到标记构造器

将自定义排序应用于角形数字数组

当作为表达式调用时,如何解析方法decorator 的签名?

当点击注册页面上的注册按钮时,邮箱重复

为什么按钮会随浮动属性一起移动?

当Redux提供程序访问Reduxstore 时,可以安全地从Redux提供程序外部调用钩子?

如何使onPaste事件与可拖动的HTML元素一起工作?

从包含数百行的表中获取更改后的值(以表单形式发送到后端)的正确方法是什么?

正则表达式,允许我匹配除已定义的子字符串之外的所有内容

如何使用TypeScrip设置唯一属性?

当我在Reaction中创建一个输入列表时,我的输入行为异常

Puppeteer上每页的useProxy返回的不是函数/构造函数

回溯替代方式

未捕获的运行时错误:调度程序为空

Next.js无法从外部本地主机获取图像

在JavaScript中将Base64转换为JSON

递增/递减按钮React.js/Redux

正则表达式以确定给定文本是否不只包含邮箱字符串

我如何才能阻止我的球数以指数方式添加到我的HTML画布中?

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