CODEWITHSUNDEEP
javascriptreactjsmaterial-uireact-router-dom
LordVee
LordVee

Reputation: 104

material-ui and navigation button with component

Following the example at https://material-ui.com/guides/composition/#button, i define in my main page a button:

      <BrowserRouter>
        <Box m={2}>
          <Button
            size="large" variant="contained"
            color="primary" endIcon={<TimerIcon />}
            fullWidth={true}
            component={SubmitTime}>
            Enter hours
          </Button>
        </Box>
      </BrowserRouter>

Documentation states:

Routing libraries The integration with third-party routing libraries is achieved with the component prop. The behavior is identical to the description of the prop above. Here are a few demos with react-router-dom. It covers the Button, Link, and List components, you should be able to apply the same strategy with all the components.

Now, based on the above, my understanding would be that the above would render a button that, when clicked, would get me to the SubmitTime component. Instead, I get the component itself rendered:

enter image description here

Being new to React and react-router-dom, i think i am doing something wrong, but can't understand what?? Any clue appreciated.

I tried adding 'to' to the component, like so, with same results:

        <Button
          size="large" variant="contained"
          color="primary" endIcon={<TimerIcon />}
          fullWidth={true}
          component={SubmitTime} to="/timesheet">
          Enter hours
        </Button>

Upvotes: 0

Views: 2188

Answers (1)

FireFighter
FireFighter

Reputation: 706

component is supposed to be the style of the button. Here you can see an example of using the button as a link: https://material-ui.com/components/buttons/#cursor-not-allowed. Also try reading the api: https://material-ui.com/api/button/#props If you want your button to function as a link, add the href="/timesheet" attribute to it. Else push the route to the history:

const history = useHistory();
...

<Button
  size="large" variant="contained"
  color="primary" endIcon={<TimerIcon />}
  fullWidth={true}
  onClick={() => history.push("/timesheet")}
  >
  Enter hours
</Button>

Upvotes: 4

Related Questions