javascript - 当我单击注册按钮时，它不会进入注册组件

Question

我的目标是，当我单击注册按钮时，它将转到组件SignUp。但不幸的是它没有路由或运行。

应用程序.js:

import React from "react";
import "./styles/App.css";
import Homepage from "./pages/homepage";
import { Routes, Route } from "react-router-dom";

export const App = () => {
  return (
    <>
      <Routes>
        <Route path="/" />
      </Routes>
    </>
  )
  <Homepage/>
};

export default App;

Body.js:

import React from "react";
import { BrowserRouter, Routes, Link, Route, Switch } from "react-router-dom";
import SignUp from "../pages/signUp";

const Body = () => {
  return (
    <div>
      <BrowserRouter>
        <button type="button" id="signup-btn">
          <Link to="/signup">Sign up</Link>
        </button>
        <Switch>
          <Route path="/signup" element={SignUp}/>
        </Switch>
      </BrowserRouter>
    </div>
  )
}

export default Body;

有什么建议吗？或者我应该重写导航栏分隔的代码？

Answer 1

首先，在您的 App.js 文件中，确保导入 BrowserRouter来自react-router-dom并用它包装整个应用程序:

import React from "react";
import "./styles/App.css";
import Homepage from "./pages/homepage";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Homepage />} />
      </Routes>
    </Router>
  );
};

export default App;

现在，在您的 Body.js 文件中，删除不必要的 <BrowserRouter>元素，因为它已在 App.js 中使用。
相反，请使用 Link导航到 SignUp 组件的组件:

import React from "react";
import { Link } from "react-router-dom";
import SignUp from "../pages/signUp";

const Body = () => {
  return (
    <div>
      <button type="button" id="signup-btn">
        <Link to="/signup">Sign up</Link>
      </button>
    </div>
  );
};

export default Body;