reactjs 每次我点击一个按钮,我想重定向到一个组件,我尝试链接,路由在React,但它不工作

dy1byipe  于 2023-01-02  发布在  React
关注(0)|答案(1)|浏览(110)

因此,当我点击第一个h1标记后的按钮时,我想打开AddProjects组件,但即使在使用react-router-dom后,它也显示错误,我认为我使用错误,请更正它

import React from "react";
import AddProjects from "../AddProjects/AddProjects";
import { Link } from "react-router-dom";
import {IoIosAddCircleOutline} from "react-icons/io";
import {BiChevronLeftCircle,BiChevronRightCircle} from "react-icons/bi"
import "./Projects.css"


export default function Projects() {
    return(
        <div className="Section-Projects">
            <div className="Projects-Header">
            <h1>My Projects </h1>
            <Link to='/AddProjects' ><button className="Add-newProject"><IoIosAddCircleOutline/></button></Link> 
            </div>
            <div className="Projects">
                <button className="arrowLeft"><BiChevronLeftCircle /></button>
                <div>
                <div className="Project">
                    <div className="Image">
                        <img src="./assets/Risponsive-weather-app.png" alt="Weather-app"/>
                    </div>
                    <div className="Bottom">
                        <h3>Project Name</h3>
                        <p>Discription</p>
                        <p>Date of Creation</p>
                        <a href="/">Git repository</a>
                    </div>
                </div>
                </div>
                <button className="arrowRight"><BiChevronRightCircle /></button>
                </div>
        </div>
    )
};

这是我的应用程序组件您能告诉我问题出在哪里吗

import './App.css';
import React from 'react';
import { Route , Routes} from "react-router-dom";
import AddProjects from './Hero/AddProjects/AddProjects';
// import Navbar from './Navbar/Navbar';
// import Hero from './Hero/Hero';
// import Credential from "./Hero/fillCredential/Credential"
import Projects from './Hero/Projects/Projects';
function App() {

  return (
    <div className="App">
      <Projects />
      <Routes>
          <Route path='/AddProjects' element={<AddProjects />} />
      </Routes>
    </div>

  );
}

export default App;
qqrboqgw

qqrboqgw1#

我认为您没有在代码中使用BrowserRouter,请尝试以下操作:

import './App.css';
import React from 'react';
import { Route , Routes,BrowserRouter} from "react-router-dom";
import AddProjects from './Hero/AddProjects/AddProjects';
// import Navbar from './Navbar/Navbar';
// import Hero from './Hero/Hero';
// import Credential from "./Hero/fillCredential/Credential"
import Projects from './Hero/Projects/Projects';
function App() {

  return (
    <BrowserRouter>
      <div className="App">
       <Projects />
       <Routes>
            <Route path='/AddProjects' element={<AddProjects />} />
       </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

相关问题