在使用命名路由时将参数传递到另一个屏幕

npm install react-router-dom

// App.js
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import HomeScreen from './HomeScreen';
import DetailScreen from './DetailScreen';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={HomeScreen} />
        <Route path="/detail/:id" component={DetailScreen} />
      </Switch>
    </Router>
  );
}

export default App;

// HomeScreen.js
import { useHistory } from 'react-router-dom';

function HomeScreen() {
  const history = useHistory();

  const handleClick = (id) => {
    history.push(`/detail/${id}`);
  };

  return (
    <div>
      <button onClick={() => handleClick(1)}>Go to Detail 1</button>
      <button onClick={() => handleClick(2)}>Go to Detail 2</button>
    </div>
  );
}

export default HomeScreen;

// DetailScreen.js
import { useParams } from 'react-router-dom';

function DetailScreen() {
  const { id } = useParams();

  return (
    <div>
      <h1>Detail Screen</h1>
      <p>ID: {id}</p>
    </div>
  );
}

export default DetailScreen;

// DetailScreen.js
import { useParams } from 'react-router-dom';

function DetailScreen() {
  const { id } = useParams();

  // 类型检查和转换
  const parsedId = parseInt(id, 10);
  if (isNaN(parsedId)) {
    return <div>Invalid ID</div>;
  }

  return (
    <div>
      <h1>Detail Screen</h1>
      <p>ID: {parsedId}</p>
    </div>
  );
}

export default DetailScreen;