反应路由器页面而不是路由

问题描述 投票：0回答：1

我正在使用最新的react-router版本6，我正在使用createbrowserouter，使用createroutesFromElements来路由和链接我的页面以获得单页投资组合网站，但是当我单击导航链接向下滚动到指定的元素部分/页面时，但它不起作用，网址确实显示已更改，但它不会移动到该部分。

这是App.jsx文件上的代码

import './App.css'
import './index.css'
import { Route, createBrowserRouter, createRoutesFromElements, RouterProvider } from 'react-router-dom';
import Navbar from './Components/Navbar'
import Home from './Components/Home';
import About from './Components/About';
import TechnicalSkills from './Components/TechnicalSkills';
import Projects from './Components/Projects';
import Contact from './Components/Contact';
import ContactForm from './Components/ContactForm';
import Footer from './Components/Footer';

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Home />}>
      <Route path="Navbar" element={<Navbar />} />
      <Route path="about" element={<About />} />
      <Route path="technicalskills" element={<TechnicalSkills />} />
      <Route path="projects" element={<Projects />} />
      <Route path="contactForm" element={<ContactForm />} />
      <Route path="contact" element={<Contact />} />
    </Route>
  ) 
)

// eslint-disable-next-line react/prop-types
function App({Route}) {
  return (
    <>
      <Navbar />
      <Home />
      <About />
      <TechnicalSkills />
      <Projects />
      <Contact />
      <Footer />
    </>
  );
}

<RouterProvider
    router={router}
  />

export default App;

对于导航栏

import React from "react";
import {
  Navbar,
  Collapse,
  Typography,
  IconButton,
} from "@material-tailwind/react";
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
import {Link} from "react-router-dom";



function NavList() {
  return (
    <ul className="my-2 flex flex-col gap-2 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6">
      <Typography
        as="li"
        variant="small"
        color="blue-gray"
        className="p-1 font-medium"
      >
        <Link to="/Home" className="hover:text-blue-500 transition-colors">
          Home
        </Link>
      </Typography>
      <Typography
        as="li"
        variant="small"
        color="blue-gray"
        className="p-1 font-medium"
      >
        <Link to="/about" className="hover:text-blue-500 transition-colors">
          About
        </Link>
      </Typography>
      <Typography
        as="li"
        variant="small"
        color="blue-gray"
        className="p-1 font-medium"
      >
       <Link to="/TechnicalSkills" className="hover:text-blue-500 transition-colors">
          Skills
        </Link>
      </Typography>
      <Typography
        as="li"
        variant="small"
        color="blue-gray"
        className="p-1 font-medium"
      >
        <Link to="/Projects" className="hover:text-blue-500 transition-colors">
          Projects
        </Link>
      </Typography>

<Typography
        as="li"
        variant="small"
        color="blue-gray"
        className="p-1 font-medium"
      >
         <Link to="/Contact" className="hover:text-blue-500 transition-colors">
          Contact
        </Link>
      </Typography>
    </ul>
  );
}
 
export default function NavbarSimple() {
  const [openNav, setOpenNav] = React.useState(false);
 
  const handleWindowResize = () =>
    window.innerWidth >= 1024 && setOpenNav(false);
 
  React.useEffect(() => {
    window.addEventListener("resize", handleWindowResize);
 
    return () => {
      window.removeEventListener("resize", handleWindowResize);
    };
  }, []);
 
  return (
    <Navbar className="mx-auto max-w-screen-xl px-6 py-3">
      <div className="flex items-center justify-between text-blue-gray-900">
        <Typography
          as="a"
          href="#"
          variant="h6"
          className="mr-4 cursor-pointer py-1.5"
        >
          Material Tailwind
        </Typography>
        <div className="hidden lg:block">
          <NavList />
        </div>
        <IconButton
          variant="text"
          className="ml-auto h-6 w-6 text-inherit hover:bg-transparent focus:bg-transparent active:bg-transparent lg:hidden"
          ripple={false}
          onClick={() => setOpenNav(!openNav)}
        >
          {openNav ? (
            <XMarkIcon className="h-6 w-6" strokeWidth={2} />
          ) : (
            <Bars3Icon className="h-6 w-6" strokeWidth={2} />
          )}
        </IconButton>
      </div>
      <Collapse open={openNav}>
        <NavList />
      </Collapse>
    </Navbar>
  );
}

首页

import { Button } from "@material-tailwind/react";
import DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline';
import GitHubIcon from '@mui/icons-material/GitHub';
import LinkedInIcon from '@mui/icons-material/LinkedIn';
import MailIcon from '@mui/icons-material/Mail';



function Home() {
    return (
     <div className=" home-component max-w-md mx-auto overflow-hidden md:max-w-2xl mt-6 mb-12 justify-center text-lg gap-2" >
     <div className="md:flex">
     <div className="md:p-8">
      <div className="uppercase tracking-wide text-2xl text-black font-semibold text-center leading-relaxed">Hi, I am</div>
       <p className="block mt-1 text-4xl leading-tight text-blachover:underline text-indigo-500 font-semibold mb-2 tracking-wide text-center">Jenise Lukhele</p>
       <p className="text-slate-200 text-black text-2xl font-semibold text-center mb-3">Fronted Developer</p>
       <div className="sm:flex text-center ml-5">
       <Button variant="outlined" size="sm" className='mt-6 me-2 items-center'>
       <span className="mr-1 md:font-size-md ">
       Resume
       </span>
       <a href="Hlobisile Lukhele resume (10).pdf" target="_blank" download="HlobisileLukhele Resume" >
       <DownloadForOfflineIcon className="sm" />
       </a>
        </Button>
        <Button variant="filled" size="md" className='mt-6 me-2'>
           Get In Touch
        </Button>
       </div>
    </div>
    <div className="flex mx-auto sm:justify-items-center ">
      <img className="Head-shot md:h-60 md:w-70 mb-4, lg:h-60 md:w-60 mb-4, sm:h-60 w-60 text-center  rounded-full object-cover object-center"src="public/images/head-shot image.png" alt="Head-shot image" />
    </div>
    </div>
    <div className='social-icons mt-2 mb-8 '>
      <div className="container-fluid text-left social-links gap-6 ml-16 fa-3xl ">
                <a href="https://www.linkedin.com/in/hlobisile-lukhele-8812b9183/" rel="noreferrer" target="_blank">
                    <LinkedInIcon style={{ color: "black",fontSize: "34px", margin:"5px"}} />                  
                </a>
                <a href="https://github.com/HlobisileLukhele" rel="noreferrer" target="_blank">
                      <GitHubIcon style={{ color: "black",fontSize: "34px", margin:"5px" }} />
                </a>

                <a href="https://[email protected]/" rel="noreferrer" target="_blank">
                      <MailIcon style={{ color: "black",fontSize: "34px", margin:"5px" }} />
                </a>

            </div>
    </div>
</div>
    );
}
 export default Home;

关于页面

import React from 'react';
import {Typography} from "@material-tailwind/react";
import {Link} from 'react-router-dom';


function About() {
    return (
        <div id="about">
            <Typography variant="h4" color="blue-gray" className=" mb-6 mt-6 text-center font-serif">
            About 
          </Typography>
            <p className="mb-8 text-center ml-10 mr-10 whitespace-normal "> Frontend developer with a passion for coding and creating responsive and functional web applications.
               My journey in web development began when I enrolled in coding bootcamps to learn the necessary skills to become a developer.
               Since then, I have continued to learn and grow as a developer, and I am constantly exploring new technologies and techniques to improve my skills.
               When I'm not coding, I enjoy  going for jogs and exploring music.  </p>
        </div>
    );
}

export default About;

项目页面

import {
    Card,
    CardHeader,
    CardBody,
    CardFooter,
    Typography,
    Button,
  } from "@material-tailwind/react";
  import GitHubIcon from '@mui/icons-material/GitHub';
  import LanguageIcon from '@mui/icons-material/Language';
   
  export default function Projects() {
    return (
      <div className="md:container md:mx-auto my-6 mb-10 gap-2 space-x-4">
      <Typography variant="h3" color="blue-gray" className="mb-4 mt-6 text-center font-serif">
        Projects
      </Typography>
      <div className="lg: grid grid-cols-1 md:grid-cols-3 gap-14 ">
        <div className="md:w-96 border-black">
          <Card className="mt-6">
            <CardHeader color="blue-gray" className="relative h-46">
              <img src="public/images/Bellabheka website.png" alt="card-image" />
            </CardHeader>
            <CardBody>
              <Typography variant="h5" color="blue-gray" className="mb-2 text-indigo-500 font-semibold ">
                Bellabheka Website
              </Typography>
              <Typography color="blue-gray">
                Bellabheka is a catering and decor company that provides services to all kinds of events around Durban.
              </Typography>
            </CardBody>
            <CardFooter className="pt-2">
            <div className="icons text-center">
              <a href="https://github.com/HlobisileLukhele/BellaBheka-Website-" target="_blank">
              <GitHubIcon />
              </a>
              <a href="https://bellabheksa-website.netlify.app/" target="_blank">
              <LanguageIcon />
              </a>
            </div>
            </CardFooter>
          </Card>
        </div>
    
        <div className=" md:w-96 border-black">
          <Card className="mt-6 space-x-4">
            <CardHeader color="blue-gray" className="relative h-46">
              <img src="public/images/Portfolio Website.jpeg" alt="card-image" />
            </CardHeader>
            <CardBody>
              <Typography variant="h5" color="blue-gray" className="mb-2 text-indigo-500 font-semibold ">
                Personal Portfolio
              </Typography>
              <Typography color="blue-gray">
                Personal portfolio website to showcase skills acquired and projects built along with the impacts it derives.
              </Typography>
            </CardBody>
            <CardFooter className="pt-2">
            <div className="icons text-center ">
              <a href="https://github.com/HlobisileLukhele/Portfolio" target="_blank">
              <GitHubIcon />
              </a>
              <LanguageIcon />
            </div>
            </CardFooter>
          </Card>
        </div>

        <div className="w-full md:w-96">
          <Card className="mt-6 border-black">
            <CardHeader color="blue-gray" className="relative h-46">
            <img src="public/images/Fruad Detector.jpeg" alt="card-image" />
            </CardHeader>
            <CardBody>
              <Typography variant="h5" color="blue-gray" className="mb-2 text-indigo-500 font-semibold">
                Fruad Detector
              </Typography>
              <Typography color="blue-gray">
              A application that checks for fraudulent activities by analyzing card transactions.
              </Typography>
            </CardBody>
            <CardFooter className="pt-5">
            <div className="icons text-center">
              <LanguageIcon />
            </div>
            </CardFooter>
          </Card>
        </div>
      </div>
    </div>
    );
  }

根据文档，我尝试使用 /:id ，但当我单击导航链接时它仍然没有路由

reactjs routes react-router
1个回答
0
投票

问题

App
组件直接渲染所有UI组件，而不是渲染路由器和路由。事实上， 
RouterProvider
没有在任何 React 组件中使用，我很惊讶这个悬空代码片段没有语法错误，也没有在路由器外部渲染 
Navbar
的任何不变错误。

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Home />}>
      <Route path="Navbar" element={<Navbar />} />
      <Route path="about" element={<About />} />
      <Route path="technicalskills" element={<TechnicalSkills />} />
      <Route path="projects" element={<Projects />} />
      <Route path="contactForm" element={<ContactForm />} />
      <Route path="contact" element={<Contact />} />
    </Route>
  );
);

// eslint-disable-next-line react/prop-types
function App({ Route }) {
  return (
    <>
      <Navbar />          // <-- rendered directly!
      <Home />            // <-- rendered directly!
      <About />           // <-- rendered directly!
      <TechnicalSkills /> // <-- rendered directly!
      <Projects />        // <-- rendered directly!
      <Contact />         // <-- rendered directly!
      <Footer />
    </>
  );
}

<RouterProvider router={router} /> // <-- Not used!

export default App;

解决方案

App
组件应渲染
RouterProvider
和
router
组件。

您可能希望通过使用 

Layout Route
在页面路由之外渲染 
Navbar
和 Footer。

示例：

import {
  createBrowserRouter,
  createRoutesFromElements,
  Outlet,
  Route,
  RouterProvider
} from 'react-router-dom';

const AppLayout = () => (
  <>
    <Navbar />
    <Outlet />
    <Footer />
  </>
);

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route element={<AppLayout />}>
      <Route index element={<Home />} />
      <Route path="about" element={<About />} />
      <Route path="technicalskills" element={<TechnicalSkills />} />
      <Route path="projects" element={<Projects />} />
      <Route path="contactForm" element={<ContactForm />} />
      <Route path="contact" element={<Contact />} />
    </Route>
  );
);

function App() {
  return <RouterProvider router={router} />;
}

export default App;
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.