TypeScript中的react-router如何使用

發(fā)布時(shí)間：2024-07-09 15:44:06 來源：億速云閱讀：83 作者：小樊欄目：編程語言

首先，安裝react-router-dom包：

npm install react-router-dom

在應(yīng)用程序的根組件（通常是App.js）中，導(dǎo)入所需的react-router-dom組件：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

在根組件中使用Router組件包裹整個(gè)應(yīng)用程序，并在其中添加Route組件來定義路由和相應(yīng)的組件：

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

在需要導(dǎo)航的組件中，可以使用Link組件來創(chuàng)建導(dǎo)航鏈接：

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

function Navigation() {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
      </ul>
    </nav>
  );
}

在需要訪問路由參數(shù)的組件中，可以使用useParams鉤子來獲取路由參數(shù)：

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

function User() {
  let { id } = useParams();

  return <h2>User ID: {id}</h2>;
}

這樣，就可以使用react-router來實(shí)現(xiàn)在TypeScript中的路由導(dǎo)航和參數(shù)獲取了。

向AI問一下細(xì)節(jié)

TypeScript中的react-router如何使用

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽