JIYIK CN >

React is famous for its declarative style. Of course, methods also play an important role.

It is this combination of abstraction and method functionality that makes React so powerful.

The most popular JavaScript libraries today use a declarative approach to building interfaces. React is special because it allows you to build UIs without directly manipulating the DOM.

Despite this high level of abstraction, React still makes room for JavaScript expressions in JSX, the language used to build interfaces.

React Router is the most popular library for navigating React applications. The library provides a <Link>component that allows developers to create links declaratively, allowing you to navigate to specific URLs seamlessly.

Most of the time, you want to change the URL after clicking a link. However, sometimes this default behavior is not enough, and you, the programmer, may need to redirect the user to another URL.

React Router also opens the door to programmatic navigation. Developers can navigate programmatically by manipulating the history stack.

The library follows the concept of client-side routing, which allows developers to bypass the browser's default behavior and change the URL without sending a request to the server.

To programmatically navigate a React application, first, you must access historythe React object. There are two ways to access this object: BrowserRouterreceiving it as a prop from a React component, or using .useHistory()React hooks.

历史The object can have many different uses. In this case, we are concerned with three methods it provides: push(), , pop()and replace().

React developers can use these to manipulate URLs programmatically.

.push()The most common and useful way to change URLs programmatically. Let’s know how to perform this operation in different versions of React Router.

This version does not include useHistorythe hook, so the only option is to access historythe object through props. You cannot do this in any React class component.

The component must be rendered by a <BrowserRoute>(often abbreviated as <Route>) component in order to access historythe property.

Let’s look at an example.

export default class Sample extends Component {
  render() {
    return (
      <Router>
        <Route path="/" component={App}></Route>
      </Router>
    );
  }
}

class App extends Component {
  render() {
    return (
      <button onClick={() => this.props.history.push("samplePath")}>
        Change the URL
      </button>
    );
  }
}

AppThe component has one element, a button with an event listener. We access the object in props historyand call its .push()method with one argument: the path we want to navigate to.

However, our component's props object only contains the history object becauseThe component will render it.

react-routerThe core React library underwent major changes when version 5.1.0 was released. React version 16.8 introduced powerful hooks that provide more functionality to functional components.

In response to these changes, react-routerthe developers behind version 5.1.0 introduced useHistory()the hook to give functional components easy access to historythe object.

Let's look at this example.

export default function Sample(props) {
  return (
    <BrowserRouter>
      <Route>{<App></App>}</Route>
    </BrowserRouter>
  );
}

function App(props) {
  let historyReference = useHistory();
  return (
    <button onClick={() => historyReference.push("boo")}>
      Navigate Programmatically in React Router 5.1.0+
    </button>
  );
}

In this case, the parent Samplecomponent looks more or less the same as before. It has one child, the function component App.

Child is very different from the previous examples. It's a function component, not a class component like before. And we don't access historythe object through props; instead, we use useHistory()the hook.

请注意, if the component is not a custom component subcomponent, the history<Route> object cannot be accessed even with hooks . Hooks only change the way we access the history object.useHistory()

In the example above, we historystore the object returned by the hook historyReferencein the variable. We then call the method on the variable .push()and provide a parameter to specify the path.

useHistory()historyHooks are the simplest way to access the object when writing functional components .

If you prefer to use class components, you can still use the solution described in the previous section even if your react-routerinstallation is version 5.1.0 or higher.

react-routerThe latest version of contains a new and improved useNavigate()hook. It returns a function specifically for programmatic navigation.

The latest React Router documentation recommends using this hook to programmatically change the URL.

function NavigateApp(){
  let navigate = useNavigate();
  return (
    <button onClick={() => navigate("boo")}>
      Navigate Programmatically in React Router 6.1.0+
    </button>
  );
}

It works in useHistory()much the same way as Hooks. useHistory()Unlike Hooks, there are a few differences: it returns a function, not a reference to an object.

navigateInstead of calling the object's method, we store the function in a variable to call it directly .push(). It takes the same arguments as the above method, a string specifying the target path.