CODEWITHSUNDEEP
reactjsreact-router-dom
joey
joey

Reputation: 49

Route in React Js

I Have two components one is Main.js and Search.js I want to link button in Main.js to navigate to Search.js, but I'm not sure how to do it.

import React from "react";
import classes from "./Main.module.css";
import Aux from "../../hoc/Aux";
import logo from "../../containers/img/Logo.png";
import Search from "../Search/Search";
import { Route } from "react-router-dom";
const Main = () => {
  return (
    <Aux>
      {/* Section starts */}
      <section className={classes.Showcase}>
        {/* Section Left */}
        <div className={classes.ShowcaseLeft}>
          <div className={classes.ShowcaseLeftTop}></div>
          <div className={classes.ShowcaseLeftBottom}></div>
        </div>
        {/* Section Right */}
        <div className={classes.ShowcaseRight}>
          <div className={classes.ShowcaseRightTop}></div>
          <div className={classes.ShowcaseRightRest}>
            <img src={logo} alt="Logo" />
            <p>
              Provide weather, water, and climate data, forecasts and warnings
              for the protection of life and property and enhancement of the
              national economy.
            </p>
            <Route path="/auth" component={Search} />
          </div>
        </div>
      </section>
    </Aux>
  );
};
export default Main;

Upvotes: 1

Views: 51

Answers (1)

DoneDeal0
DoneDeal0

Reputation: 6267

You have two options: either use react-router-dom useHistory hook, or the Link component. Here are the two ways:

// useHistory
import { useHistory } from "react-router-dom";

function Main() {
  let history = useHistory();
  return (
    <button type="button" onClick={()=> history.push("/search")}>
      search
    </button>
  );
}

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

function Main() {
  let history = useHistory();
  return (
  <Link to="/search">
    <button type="button">
      search
    </button>
  </Link>
  );
}

A last piece of advice: I would suggest to add all your paths in a single file, so you can never make any typo. In the end, the ideal would be to write something like: <Link to={path.search}>

Upvotes: 1

Related Questions