javascript 无法在react路由器v5中设置默认路由

我想设置默认路由到主页，我使用的React路由器v5，但它不工作，我正在尝试以这种方式，
Index.js

import React from "react";
import ReactDOM from "react-dom";
import "assets/css/App.css";
import 'assets/css/main.css'
import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
import AuthLayout from "layouts/auth";
import AdminLayout from "layouts/admin";
import HomeLayout from "layouts/home";
import { ChakraProvider } from "@chakra-ui/react";
import theme from "theme/theme";
import { ThemeEditorProvider } from "@hypertheme-editor/chakra-ui";
import ErrorPage from "views/ErrorPage";

ReactDOM.render(
  <ChakraProvider theme={theme}>
    <React.StrictMode>
      <ThemeEditorProvider>
        <HashRouter>
          <Switch>
            <Route path={`/auth`} component={AuthLayout} />
            <Route path={`/admin`} component={AdminLayout} />
            <Route path={`/`} component={HomeLayout} />
            <Route path={'/home'} component={HomeLayout} />
            <Route path={'**'} exact={true} to='/' />
            {/* <Redirect exact from='/' to='/home'/> */}
          </Switch>
        </HashRouter>
      </ThemeEditorProvider>
    </React.StrictMode>
  </ChakraProvider>,
  document.getElementById("root")
);

这里其他路由工作一样，联系人和主页，但默认路由不重定向到主页。
Routes.js

import React from "react";
import { Icon } from "@chakra-ui/react";
import {
  MdBarChart,
  MdPerson,
  MdHome,
  MdLock,
  MdOutlineShoppingCart,
} from "react-icons/md";
import MainDashboard from "views/admin/default";
import Profile from "views/admin/profile";
import DataTables from "views/admin/dataTables";
import SignInCentered from "views/auth/signIn";
import SignUp from "views/auth/signup";
import Home from "views/home";
import Contact from "views/contact";
import About from "views/about";

const routes = [
  {
    name: "Dashboard",
    layout: "/admin",
    path: "/default",
    icon: <Icon as={MdHome} width='20px' height='20px' color='inherit' />,
    component: MainDashboard,
  },
  {
    name: "Alumni",
    layout: "/admin",
    icon: <Icon as={MdBarChart} width='20px' height='20px' color='inherit' />,
    path: "/data-tables",
    component: DataTables,
  },
  {
    name: "Profile",
    layout: "/admin",
    path: "/profile",
    icon: <Icon as={MdPerson} width='20px' height='20px' color='inherit' />,
    component: Profile,
  },
  {
    name: "Sign In",
    layout: "/auth",
    path: "/sign-in",
    icon: <Icon as={MdLock} width='20px' height='20px' color='inherit' />,
    component: SignInCentered,
  },
  {
    name: "Sign In",
    layout: "/auth",
    path: "/sign-up",
    icon: <Icon as={MdLock} width='20px' height='20px' color='inherit' />,
    component: SignUp,
  },
  {
    name: "Landing Page",
    layout: "/Public",
    path: "/home",
    component: Home,
  },
  {
    name: "Contact Us",
    layout: "/Public",
    path: "/contact-us",
    component: Contact,
  },
  {
    name: "About Us",
    layout: "/Public",
    path: "/about-us",
    exact:'true',
    component: About,
  },
];

export default routes;

Navbar.js

import {
    Box,
    Button,
    ButtonGroup,
    Container,
    Flex,
    HStack,
    IconButton,
    Stack,
    useBreakpointValue,
    useColorModeValue,
    useDisclosure, Image
} from '@chakra-ui/react'
import * as React from 'react'
import { FiMenu } from 'react-icons/fi'
import { HashLink as Link } from 'react-router-hash-link'
import { NavLink } from 'react-router-dom'

export const Nav = () => {
    const { isOpen, onOpen, onClose } = useDisclosure();
    const isDesktop = useBreakpointValue({
        base: false,
        lg: true,
    })
    return (
        <Flex
            py={2}
            px={4}
            bg="#fff"
            pos="fixed" w="100%" zIndex={2}
        >
            <Box w='100%'>
                <HStack spacing="10">
                    {isDesktop ? (
                        <>
                            <Flex alignItems="start" wrap="wrap" >
                                <Flex flexGrow={1} justify="center" /*border='1px'*/>
                                    {/* <Heading ml={[4, 0]}>Zensurance</Heading> */}
                                    <Box ml={[4, 8]}>
                                        <Image
                                            src='./assets/images/other/logo.png'
                                            alt=''
                                            w={250}
                                        />
                                    </Box>
                                </Flex>
                            </Flex>

                            <Flex justifyContent='end' fontSize='20' mr={5} fontWeight={500} flex="1">
                                <HStack spacing={10}>
                                    <NavLink to="/home" >Home</NavLink>
                                    <NavLink to="/about-us" >About</NavLink>
                                    <Link smooth to={{ pathname: "/home", hash: "testimonials" }}> Testimonials</Link>
                                    <Link smooth to={{ pathname: "/home", hash: "faq" }}> Faq</Link>
                                    <NavLink to="/contact-us" >Contact</NavLink>
                                </HStack>
                                <HStack ml={3}>
                                    <NavLink to='auth/sign-in'>
                                        <Button colorScheme='red'>Sign in</Button>
                                    </NavLink>
                                </HStack>
                            </Flex>
                        </>
                    ) : (
                        <>
                            <Flex alignItems="start" wrap="wrap" w='100%'>
                                <Flex flexGrow={1} justify="center" /*border='1px'*/>
                                    {/* <Heading ml={[4, 0]}>Zensurance</Heading> */}
                                    <Box ml={[4, 8]}>
                                        <Image
                                            src='./assets/images/other/logo.png'
                                            alt=''
                                            w={'280px'}
                                            h={'autopx'}
                                        />
                                    </Box>
                                </Flex>
                            </Flex>
                            <Flex justifyContent='end' spacing={2} w='100%'>
                                <IconButton
                                    variant="ghost"
                                    icon={<FiMenu fontSize="1.25rem" onClick={isOpen ? onClose : onOpen} />}
                                    aria-label="Open Menu"
                                />
                                <NavLink to='auth/sign-in'>
                                    <Button colorScheme='red'>Sign in</Button>
                                </NavLink>
                            </Flex>
                        </>
                    )}
                </HStack>

                {!isDesktop && isOpen ? (

                    <Stack justifyContent='center' fontSize='20' mr={5} fontWeight={500} direction={["column"]}>
                        <NavLink to="/home" >Home</NavLink>
                        <NavLink to="/about-us" >About</NavLink>
                        <Link smooth to={{ pathname: "/home", hash: "testimonials" }}> Testimonials</Link>
                        <Link smooth to={{ pathname: "/home", hash: "faq" }}> Faq</Link>
                        <NavLink to="/contact-us" >Contact</NavLink>
                    </Stack>
                )
                    :
                    ''
                }
            </Box>

        </Flex>
    )
}

HomyLayout.js

import React from "react";
import routes from "routes.js";
import { Redirect, Route, Switch } from "react-router-dom";
import { Box, useColorModeValue } from "@chakra-ui/react";
import { Nav } from "./header";
import Footer from "./footer";

export default function Home() {

  const getRoutes = (routes) => {
    return routes.map((prop, key) => {
      if (prop.layout === "/Public") {
        return (
          <Route
            path={prop.path}
            component={prop.component}
            key={key}
          />
        );
      } else {
        return null;
      }
    });
  };
  const authBg = useColorModeValue("white", "navy.900");
  document.documentElement.dir = "ltr";
  return (
    <Box
      bg={authBg}
      float='right'
      minHeight='100vh'
      height='100%'
      position='relative'
      w='100%'
      transition='all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1)'
      transitionDuration='.2s, .2s, .35s'
      transitionProperty='top, bottom, width'
      transitionTimingFunction='linear, linear, ease'>
      <Box mx='auto' minH='100vh'>
        <Nav />
        <Switch>
          {getRoutes(routes)}
        </Switch>
        <Footer />
      </Box>
    </Box>
  );
}

提前感谢……
Lorem ipsum dolor sit amet，consectetur adipisicing elit.在这一点上，我们可以理解为，我们在这一点上的过失，是我们在这一点上的过失。

如果我理解正确的话，您希望HomeLayout组件成为“默认”路由/组件，那么只需将之前未被Switch组件匹配和呈现的任何路径重定向到"/home"。
示例：

<HashRouter>
  <Switch>
    <Route path="/auth" component={AuthLayout} />
    <Route path="/admin" component={AdminLayout} />
    <Route path="/home" component={HomeLayout} />
    <Redirect to="/home" />
  </Switch>
</HashRouter>

基本要点似乎是您希望routes配置中的某些路由使用特定的布局。所有的“公共”路由都将嵌套在"/home"根路径下，即它们应该是"/home/contact-us"等，就像Navbar中的NavLink使用to='auth/sign-in'导航到"/auth"根目录。HomeLayout组件应该呈现这些从父"/home"路径构建相对的后代路由。
示例：

import { Switch, Route, useRouteMatch } from 'react-router-dom';

function HomeLayout() {
  const { path } = useRouteMatch(); // <-- "/home"

  const getRoutes = (routes) => {
    return routes
      .filter((route) => route.layout === "/Public") // <-- filter public routes
      .map((route) => (
        <Route
          key={`${path}${route.path}`}
          path={`${path}${route.path}`} // <-- build path, a.k.a. "/home/about-us"
          component={route.component}
          exact // <-- exactly match so route path order is irrelevant
        />
      ));
  };

  ...

  return (
    <Box
      ...
    >
      <Box mx="auto" minH="100vh">
        <Nav />
        <Switch>{getRoutes(routes)}</Switch>
        <Footer />
      </Box>
    </Box>
  );
}

更新路由配置以修复Home组件在"/home"上的渲染，而不是在"/home/home"上的渲染。

const routes = [
  {
    name: "Dashboard",
    layout: "/admin",
    path: "/default",
    icon: <Icon as={MdHome} width="20px" height="20px" color="inherit" />,
    component: MainDashboard
  },
  {
    name: "Alumni",
    layout: "/admin",
    icon: <Icon as={MdBarChart} width="20px" height="20px" color="inherit" />,
    path: "/data-tables",
    component: DataTables
  },
  {
    name: "Profile",
    layout: "/admin",
    path: "/profile",
    icon: <Icon as={MdPerson} width="20px" height="20px" color="inherit" />,
    component: Profile
  },
  {
    name: "Sign In",
    layout: "/auth",
    path: "/sign-in",
    icon: <Icon as={MdLock} width="20px" height="20px" color="inherit" />,
    component: SignInCentered
  },
  {
    name: "Sign In",
    layout: "/auth",
    path: "/sign-up",
    icon: <Icon as={MdLock} width="20px" height="20px" color="inherit" />,
    component: SignUp
  },
  {
    name: "Landing Page",
    layout: "/Public",
    path: "/",      // <-- use "/" here instead of `"/home"`
    component: Home
  },
  {
    name: "Contact Us",
    layout: "/Public",
    path: "/contact-us",
    component: Contact
  },
  {
    name: "About Us",
    layout: "/Public",
    path: "/about-us",
    exact: "true",
    component: About
  }
];

javascript 无法在react路由器v5中设置默认路由

1条答案

相关问题

热门标签

最新问答