Author: John Au-Yeung

Sometimes, we want to hide navbar in login page in React Router.

In this article, we’ll look at how to hide navbar in login page in React Router.

How to hide navbar in login page in React Router?

To hide navbar in login page in React Router, we can put our nav bar inside the container with the authenticated routes.

For instance, we write

import React from "react";

const MyComponent = () => {
  //...
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route exact path="/" component={Login} />
          <div>
            <NavBar />

            <Route exact path="/addproduct" component={Addproduct}></Route>
            <Route exact path="/products" component={Products}></Route>
          </div>
        </Switch>
      </Router>
    </div>
  );
};

to put NavBar at the same level as the 2 Routes that needs authentication.

NavBar is one level deeper than the Route that renders the Login component, so NavBar won’t be rendered with Login.

Conclusion

To hide navbar in login page in React Router, we can put our nav bar inside the container with the authenticated routes.

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.