我想设置默认路由到主页,我使用的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.在这一点上,我们可以理解为,我们在这一点上的过失,是我们在这一点上的过失。
1条答案
按热度按时间mzillmmw1#
如果我理解正确的话,您希望
HomeLayout
组件成为“默认”路由/组件,那么只需将之前未被Switch
组件匹配和呈现的任何路径重定向到"/home"
。示例:
基本要点似乎是您希望
routes
配置中的某些路由使用特定的布局。所有的“公共”路由都将嵌套在"/home"
根路径下,即它们应该是"/home/contact-us"
等,就像Navbar
中的NavLink
使用to='auth/sign-in'
导航到"/auth"
根目录。HomeLayout
组件应该呈现这些从父"/home"
路径构建相对的后代路由。示例:
更新路由配置以修复
Home
组件在"/home"
上的渲染,而不是在"/home/home"
上的渲染。