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

score 1 · Accepted Answer · answered Feb 02 '20 at 01:24

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.

1.Where should I write this 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? — x89, Feb 02 '20 at 01:29
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](https://codesandbox.io/s/thirsty-ganguly-bhb7h?fontsize=14&hidenavigation=1&theme=dark) that should help you out! — Sam Gomena, Feb 02 '20 at 01:37

Button Navigation with React Router

1 Answers1