Category: React

Sometimes, we want to use anchors with React Router

In this article, we’ll look at how to use anchors with React Router.

How to use anchors with React Router?

To use anchors with React Router, we can use the react-router-hash-link package.

To install it, we run

npm install react-router-hash-link

Then we use it by writing

import { HashLink as Link } from "react-router-hash-link";

//...

<Link to="home-page#section-three">Section three</Link>;

to add the HashLink component and set its to prop to a URL with the ID of the element to scroll to after the hash.

Conclusion

To use anchors with React Router, we can use the react-router-hash-link package.

Sometimes, we want to fix React Router changing URL but not the view

In this article, we’ll look at how to fix React Router changing URL but not the view.

How to fix React Router changing URL but not the view?

To fix React Router changing URL but not the view, we should set exact for the route components that aren’t rendering.

For instance, we write

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route } from "react-router-dom";
import Users from "./components/Users";

import Details from "./components/Details";

ReactDOM.render(
  <BrowserRouter>
    <div>
      <Route exact path="/" component={Users} />
      <Route path="/details" component={Details} />
    </div>
  </BrowserRouter>,
  document.getElementById("app")
);

to add the exact prop to the first Route so that Users is rendered when we go to /.

The Routes that have more specific path values don’t need exact since they don’t match other Routes.

Conclusion

To fix React Router changing URL but not the view, we should set exact for the route components that aren’t rendering.

Sometimes, we want to fix component does not remount when route parameters change with React Router.

In this article, we’ll look at how to fix component does not remount when route parameters change with React Router.

How to fix component does not remount when route parameters change with React Router?

To fix component does not remount when route parameters change with React Router, we should just watch the route parameter for changes.

For instance, we write

<Route
  render={(props) => <Component {...props} />}
  path="/project/:projectId/"
/>;

to add a route.

Then in our route component, we write

import React, { useEffect } from "react";
const Component = (props) => {
  useEffect(() => {
    props.getData();
  }, [props.match.params.projectId]);

  return (<div>Layout</div>);
}

export default Component;

to watch the props.match.params.projectId property, which has the projectId route parameter value.

If props.match.params.projectId changes, then we call props.getData to get the data again by running the useEffect hook callback again.

Conclusion

To fix component does not remount when route parameters change with React Router, we should just watch the route parameter for changes.

Sometimes, we want to detect user leaving page with React Router.

In this article, we’ll look at how to detect user leaving page with React Router.

How to detect user leaving page with React Router?

To detect user leaving page with React Router, we can use the Prompt component.

For instance, we write

import { Prompt } from "react-router";

const MyComponent = () => (
  <>
    <Prompt
      when={shouldBlockNavigation}
      message="Are you sure you want to leave the page?"
    />
    {/* Component JSX */}
  </>
);

to add the Prompt component to MyComponent that lets us show a message when we’re leaving the page.

And we set the when prop to shouldBlockNavigation so the prompt is only shown when shouldBlockNavigation is true and when we’re leaving the page.

Conclusion

To detect user leaving page with React Router, we can use the Prompt component.

Sometimes, we want to add routes with optional path parameter with React Router.

In this article, we’ll look at how to add routes with optional path parameter with React Router.

How to add routes with optional path parameter with React Router?

To add routes with optional path parameter with React Router. we can add a question mark after the route parameter placeholder.

For instance, we write

<Route path="/to/page/:pathParam1?/:pathParam2?" component={MyPage} />;

to add a Route component with a question mark after pathParam1 and pathParam2 to add the route parameter placeholder to make them optional.

Conclusion

To add routes with optional path parameter with React Router. we can add a question mark after the route parameter placeholder.