Button Navigation with React Router

Question

Header: I am trying to navigate to a new page from my Material UI button using the onClick method. I am confused about what to write in my handleClickSignIn function.

Code snippet from my Header.tsx file:

const HatsPage = () => (
  <div>
    <h1>
      HATS PAGEHH
    </h1>
  </div>
)

function handleClickSignIn() {
  <Route component= {HatsPage}></Route>
}

const Header = () => (
  <div className = 'header'>‚
    <h1 className = 'title'>
      Instaride
    </h1>
    <div className="header-right">
      <Button onClick= {handleClickSignIn}> Sign In</Button>
      <Button> Contact</Button>
    </div>
  </div>
);

This doesn't work and I get errors like:

expected assignment or function but got expression instead

Sam Gomena · Accepted Answer · 2020-02-02 01:24:49Z

1

The problem you're having it that you're generating a Route component every time the Sign In button is clicked.

Instead, you should use a Link component like so:

const Header = () => (
  <div className = 'header'>‚
  <h1 className = 'title'>
    Instaride</h1>
  <div className="header-right">
    <Link to={"/login"}> Sign In</Link>
    <Button> Contact</Button>
  </div>
</div>

This will create a link component that, when clicked, will direct to the /login URL. To then render components at that URL you'll also need to define a Route. You've already done this with but need to define the path like so:

<Route path={"/login"} component={HatsPage} />

And then note that this Route, your Header component and any Link's need to be nested within an instance of a BrowserRouter.

answered Feb 2, 2020 at 1:24

Sam Gomena

1,47914 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

x89 Over a year ago

1.Where should I write this <Route> line exactly? 2.So if I am calling my header in my homepage, I need to wrap it with BrowserRouter again? Even if the whole app is wrapped by it in my App.tsx or Index.tsk files?

Sam Gomena Over a year ago

You only need one instance of BrowserRouter, so no. You do need the Header component within the instance of it though. Here's a pen that should help you out!

Collectives™ on Stack Overflow

Button Navigation with React Router

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related