React獲取路由參數詳解

一、React獲取路由參數的方法

React是一款流行的JavaScript庫，被廣泛用於構建單頁應用程序。而獲取路由參數是在React應用程序中一項很常見的任務。常見的獲取路由參數的方法如下：

1. 使用React Router獲取參數
2. 監聽路由變化和傳遞參數
3. 獲取URL參數

二、React Router獲取參數

React Router是一個流行的React社區庫，它對路由進行了高度抽象，允許你以聲明性方式定義你的路由。

使用React Router獲取參數的方法有多種，其中比較簡單的是利用match對象來獲取路由參數。

  
  import { BrowserRouter as Router, Route } from 'react-router-dom';
  
  function App() {
    return (
      <Router>
        <div>
          <Route path="/:id" component={Child} />
        </div>
      </Router>
    );
  }
  
  function Child({ match }) {
    return <h3>ID: {match.params.id}</h3>;
  }
  

上面的代碼中，父組件App渲染了一個Route子組件，這個子組件的路徑為/:id，它會匹配任何路徑為「/XXX」的URL（其中XXX是一個參數）。當匹配到一個URL時，React Router會在props對象中提供一個match對象，通過該對象可以訪問路徑參數。

三、React路由參數變化 頁面不變

在應用程序中，我們常常需要在頁面不刷新的情況下更新路由參數。為此，可以使用React Router中的withRouter高階組件來實現。

  
  import React from 'react';
  import { withRouter } from 'react-router-dom';
  
  class MyComponent extends React.Component {
    componentDidMount() {
      this.unlisten = this.props.history.listen((location, action) => {
        console.log('location:', location);
        console.log('action:', action);
      });
    }
  
    componentWillUnmount() {
      this.unlisten();
    }
  
    render() {
      return <div>My Component</div>;
    }
  }
  
  export default withRouter(MyComponent);
  

上面的代碼中，withRouter高階組件允許我們將路由屬性（如history和location等）添加到我們的組件Props中。我們可以使用history.listen來監聽路由變化，從而實現參數變化。

四、React獲取地址欄參數

在React中獲取地址欄參數可以使用window.location對象，但是這種方法並不好用，因為React應用程序通常是單頁應用（SPA），而URL的改變並不會導致頁面的刷新。

  
  class MyComponent extends React.Component {
    handleClick = () => {
      const searchParams = new URLSearchParams(window.location.search);
      console.log(searchParams.get('name'));
    }
  
    render() {
      return (
        <div>
          <button onClick={this.handleClick}>Get Name</button>
        </div>
      );
    }
  }
  

上面的代碼中，我們通過創建一個URLSearchParams對象來獲取URL參數。這種方法只有在React應用程序的URL發生變化時才能生效，如果URL沒有變化，那麼無論多少次調用都會返回相同的結果。

五、React獲取當前路由地址

在某些情況下，我們需要獲取當前頁面的路由地址。可以使用withRouter高階組件來實現：

  
  import { withRouter } from 'react-router';
  
  class MyComponent extends React.Component {
    render() {
      const { location } = this.props;
      return <h3>Current URL: {location.pathname}</h3>;
    }
  }
  
  export default withRouter(MyComponent);
  

上面的代碼中，我們使用withRouter高階組件將location屬性添加到組件Props中，從而可以使用location.pathname獲取當前路由地址。

六、React獲取url後面的參數

我們可以通過window.location.search獲取url後面的參數：

  
  class MyComponent extends React.Component {
    handleClick = () => {
      const searchParams = new URLSearchParams(window.location.search);
      console.log(searchParams.get('id'));
    }
  
    render() {
      return (
        <div>
          <button onClick={this.handleClick}>Get ID</button>
        </div>
      );
    }
  }
  

上面的代碼中，我們使用window.location.search來獲取URL後面的參數，並使用URLSearchParams對象來解析參數。

七、React路由傳遞參數

在React中，我們可以通過props將參數傳遞給子組件。在路由中，我們可以使用React Router的路由屬性來傳遞參數：

  
  import { BrowserRouter as Router, Route } from 'react-router-dom';
  
  function App() {
    return (
      <Router>
        <div>
          <Route path="/" exact component={Home} />
          <Route path="/about/:name" component={About} />
        </div>
      </Router>
    );
  }
  
  function About(props) {
    return (
      <div>
        <h3>Hello {props.match.params.name}!</h3>
      </div>
    );
  }
  

上面的代碼中，我們在路由屬性中定義了一個「/about/:name」的路徑。在About組件中，我們可以通過props.match.params.name來訪問路由參數。

八、React路由參數

在React應用程序中，我們可以使用React Router的Route組件來定義路由。Route組件可以匹配多個路徑，並使用component屬性來指定要渲染的組件。在組件中我們可以通過props.match.params訪問路由參數：

  
  import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
  
  function App() {
    return (
      <Router>
        <div>
          <ul>
            <li><Link to="/about/react">React</Link></li>
            <li><Link to="/about/angular">Angular</Link></li>
            <li><Link to="/about/vue">Vue</Link></li>
          </ul>
          <Route path="/about/:name" component={About} />
        </div>
      </Router>
    );
  }
  
  function About(props) {
    return (
      <div>
        <h2>Hello {props.match.params.name}!</h2>
      </div>
    );
  }
  

上面的代碼中，我們定義了一個包含三個鏈接的列表，在/ about / ：name路由下渲染About組件。通過props.match.params.name，我們可以訪問路由參數。例如，如果我們點擊React鏈接，則會顯示「Hello React！」。