页面导航不适用于按钮单击

Question

当我尝试通过单击按钮导航到 /addData 组件时，我不知道为什么 React Router 不起作用。当我尝试使用路径时它应该正常工作，但当我单击按钮时它不会。我想知道我做错了什么。请注意，这是我第一次使用 React Router。我使用的 React Router 版本是react-router-dom": "^5.3.0 这是代码。

App.js

import MainScreen from "./screens/main_screen/main_screen";
import AddDataScreen from "./screens/add_data/add_data";
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route exact path="/" component={MainScreen}>
          </Route>
          <Route path="/addData" component={AddDataScreen}>  //This is a blank page with Add Data written on it
          </Route>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

我打算从中导航的按钮所在的组件：

import { Link } from "react-router-dom";

const FloatingButton = () => {

    const addScreen = () => {
        <Link to="/addData">Add Data</Link>
        console.log("Clicked")
    }

    return (
        <div className="floatingButton">
            
            <div className="addFloat" onClick={addScreen}>   //The button
                <IoMdAdd color={"white"} size={"20px"}/>
            </div>
            
        </div>
    );
}

export default FloatingButton;

Answer 1

您的addScreen 函数只返回Link，它是一个组件，并且这种方法不会调用任何重定向操作（如您所见here，链接导致<a> 元素）。

您可以使用useHistory 挂钩访问history 对象并推送addData 路由：

import { useHistory } from "react-router-dom";

  let history = useHistory();

  const addScreen = () => {
    history.push("/addData");
  }