当在React中点击应用程序组件中的SignUp时，想要转到SignUp页面，可以有人相应地修改代码吗

npm install react-router-dom

import React from 'react';

const SignUp = () => {
  return (
    <div>
      {/* SignUp页面的内容 */}
    </div>
  );
}

export default SignUp;

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

import React from 'react';
import { Link } from 'react-router-dom';

const App = () => {
  const handleSignUpClick = () => {
    // 执行导航到SignUp页面的操作
  }

  return (
    <div>
      {/* 应用程序的其他内容 */}
      <button onClick={handleSignUpClick}>SignUp</button>
    </div>
  );
}

export default App;

import React from 'react';
import { Link } from 'react-router-dom';

const App = () => {
  return (
    <div>
      {/* 应用程序的其他内容 */}
      <Link to="/signup">SignUp</Link>
    </div>
  );
}

export default App;

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import App from './App';
import SignUp from './SignUp';

const Root = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={App} />
        <Route path="/signup" component={SignUp} />
      </Switch>
    </Router>
  );
}

export default Root;