React Router v6.4.5，页面加载重定向答案

【问题标题】：React Router v6.4.5, redirect on page loadReact Router v6.4.5，页面加载重定向
【发布时间】：2022-12-11 10:55:50
【问题描述】：

寻找有关重定向的帮助。下面是代码 sn-ps。

索引.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>
);

应用程序.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/home”时，让页面从“localhost:3000/”重定向到“localhost:3000/home”，这样我就可以呈现应用程序主页。在我使用插座的地方，我希望它在那里呈现并始终呈现导航栏。我在 createBrowserRouter 的文档中没有看到用于重定向的选项。

【问题讨论】：

标签： javascript html css reactjs react-router

【解决方案1】：

您可以呈现从"/" 到"/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 />
      }
    ]
  }
]);

【讨论】：