reason路由器由于某些原因不能工作

Question

我在处理我的投资组合。我试图将所有组件(主页、技能、项目、联系人)放在一个页面上，所以我不打算为这些组件设置路线。但是，我想为项目细节组件设置一个路径，我将在项目组件上设置一个链接。我还想为404页设置一个路由。

我编写了以下代码，但当我访问ProjectDetail时，它不知道http://localhost:3000/projects页面。你能给我建议怎样才能解决这个问题吗？

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './Home';
import Skills from './Skills';
import Projects from './Projects';
import ProjectDetail from './ProjectDetail';
import Contact from './Contact';
import Error from './Error';

const App = () => {
    return (
        <>
            <Router>
                <Home />
                <Skills />
                <Projects />
                <Contact />
                <Routes>
                    <Route path='/projects' element={<ProjectDetail />} />
                    <Route path='*' element={<Error />} />
                </Routes>
            </Router>
        </>
    );
};

export default App;

Answer 1

我认为您需要将您想要的所有组件打包到一个页面中，并将其放在如下路线上：<Route path="/" element={<OnePageApp/>}/>

在这之后，我没有看到任何其他错误。

祝你好运，我希望我能帮助你

Answer 2

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './Home';
import Skills from './Skills';
import Projects from './Projects';
import ProjectDetail from './ProjectDetail';
import Contact from './Contact';
import Error from './Error';

const App = () => {
    return (
        <>
            <Router>
                <Home />
                <Skills />
                <Projects />
                <Contact />
                <Routes>
                    <Route path='/projects' element={ProjectDetail} />
                    <Route path='*' element={Error} />
                </Routes>
            </Router>
        </>
    );
};

export default App;