Category: React

Sometimes, we want to programmatically update query parameters in React Router.

in this article, we’ll look at how to programmatically update query parameters in React Router.

How to programmatically update query parameters in React Router?

To programmatically update query parameters in React Router, we cal call the history.replace method.

For instance, we write

import React from "react";
import { useHistory, useLocation } from "react-router";

const MyComponent = () => {
  const history = useHistory();
  const location = useLocation();

  const onChange = (event) => {
    const { name, value } = event?.target;
    const params = new URLSearchParams({ [name]: value });
    history.replace({ pathname: location.pathname, search: params.toString() });
  };

  return <input name="search" onChange={onChange} />;
};

to call history.replace in the onChange function to navigate after we change the input value.

We create the query string with the URLSearchParams constructor by calling it with an object with the query string key name and value value.

Then we call history.replace with an object with the search property set to the query string we created with params.toString to navigate with the query string.

Conclusion

To programmatically update query parameters in React Router, we cal call the history.replace method.

Sometimes, we want to fix the "Cannot read property ‘history’ of undefined" error React Router 5.

In this article, we’ll look at how to fix the "Cannot read property ‘history’ of undefined" error React Router 5.

How to fix the "Cannot read property ‘history’ of undefined" error React Router 5?

To fix the "Cannot read property ‘history’ of undefined" error React Router 5, we should wrap our route components inside Router.

Then we can call useHistory in the components to return the history object.

For instance, we write

const AppWrapper = () => {
  return (
    <Router>
      <App />
    </Router>
  );
};

to add the AppWrapper component that wraps Router in App.

Then in App, we write

const App = () => {
  const history = useHistory();
  //...
};

to call useHistory to return the history object.

Conclusion

To fix the "Cannot read property ‘history’ of undefined" error React Router 5, we should wrap our route components inside Router.

Then we can call useHistory in the components to return the history object.

Sometimes, we want to pass parameters to component with React Router.

In this article, we’ll look at how to pass parameters to component with React Router.

How to pass parameters to component with React Router?

To pass parameters to component with React Router, we can use the useParams hook.

For instance, we write

<Route path="/details/:id" component={DetailsPage} />;

to add the id parameter to our route.

Then in DetailsPage, we write

import { useParams } from 'react-router';

export default function DetailsPage() {
  const { id } = useParams();
  // ...
}

to call the useParmas hook and get the id property from the returned object to get the value of the id URL parameter.

Conclusion

To pass parameters to component with React Router, we can use the useParams hook.

Sometimes, we want to fix the ‘You should not use Link outside a Router’ error with React Router.

In this article, we’ll look at how to fix the ‘You should not use Link outside a Router’ error with React Router.

How to fix the ‘You should not use Link outside a Router’ error with React Router?

To fix the ‘You should not use Link outside a Router’ error with React Router, we should make sure Link is only used in components that are inside Router.

For instance, we write

const App = () => (
  <BrowserRouter>
    <div className="sans-serif">
      <Route path="/" component={Main} />
      <Route path="/view/:postId" component={Single} />
    </div>
  </BrowserRouter>
);

render(<App />, document.getElementById("root"));

to add some Routes in BrowserRouter.

Then we Link in Main by writing

import React from "react";
import { Link } from "react-router-dom";

const Main = () => (
  <div>
    <h1>
      <Link to="/">Example</Link>
    </h1>
  </div>
);

export default Main;

Conclusion

To fix the ‘You should not use Link outside a Router’ error with React Router, we should make sure Link is only used in components that are inside Router.

To redirect from / to another page with Next.js, we can get the pathname property from the Router object and do the redirect if pathname is '/'.

For instance, we write

import React, { useEffect } from "react";
import Router from "next/router";

const Comp = () => {
  //...
  useEffect(() => {
    const { pathname } = Router;
    if (pathname === "/") {
      Router.push("/hello");
    }
  });
  //...
};

to call get pathname from Router.

And if pathname is '/', then we call Router.push to go to the URL we want.

This works with Next.js 10.x