0 
import './App.css';
import PrimaryNavbar from './components/PrimaryNavbar';
import SecondaryNavbar from './components/SecondaryNavbar';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Logo from './components/Logo';
import MobileNavbar from './components/MobileNavbar';

import Home from './components/Contents/Home'
import Deals from './components/Contents/Deals';
import Goto from './components/Contents/Goto';
import SignUp from './components/Contents/SignUp';
import Todo from './components/Contents/Todo';
import Cards from './components/Cards';

function App() {
  return (
    <>
      <Router>
        <div className="d-flex justify-content-around">
          <PrimaryNavbar />
          <Logo />
          <SecondaryNavbar />
          <MobileNavbar />
        </div>
        <Home />
        <Cards />
        <Routes>
          <Route path="/" exact component={<Home />} />
          <Route path="/deals" component={<Deals />} />
          <Route path="/goto" component={<Goto />} />
          <Route path="/todo" component={<Todo />} />
          <Route path="/signup" component={<SignUp />} />
        </Routes>
      </Router>
    </>
  );
}
export default App;

我尝试了所有可能的方法来链接到新页面，但失败了。我也尝试过使用 switch(v5)。当我尝试

<Route path="/" exact element={<Home />} > </Route>

我能够从我的其他页面获取内容，但它们都在底部。每次，我切换到新页面，内容都在底部带有上面的代码。但是使用第一个代码，我什至没有从其他页面获取内容，链接更改而没有提供任何内容。

4

1 回答 1

0

尝试使用元素而不是组件。我相信组件是 v6 的发展方向。
https://reactrouter.com/docs/en/v6/getting-started/overview

          <Route path="/" exact element={<Home />} />
          <Route path="/deals" element={<Deals />} />
          <Route path="/goto" element={<Goto />} />
          <Route path="/todo" element={<Todo />} />
          <Route path="/signup" element={<SignUp />} />
于 2021-12-28T03:52:10.363 回答