How to do navigation via button in react - app engine

[kwangxi]

Hi, 

I wanted to navigate to the next page via a button. It will be via the onSelect method. 

How should I exactly implement it specifically the navigation via all the buttons including return?

<TitleBar.Suffix>
 <ButtonWrapper>
 <Button prefixIcon={<HomeIcon />} variant="minimal" >
 Home
</Button>
 <Button prefixIcon={<DataTableIcon />} variant="minimal">
 Software
</Button>
 <Button prefixIcon={<StackedBarChartIcon />} variant="minimal">
 Analytics
</Button>

 </ButtonWrapper>
</TitleBar.Suffix>

[robaxelsen · Accepted solution]

Hi @kwangxi 👋 

Sorry for the late reply, and maybe you've already solved this.

If not, I'll give you a few options. The most straightforward solution is to create a function to override location, and pass it as event handler on the button component:

const clickHandler = () => {
  location.href = "https://google.com"
};
...
<Button onClick="clickHandler()">
  Click Me
</Button>

The best practice for this however, is to either use a component which allows for this in it's interface, or a router. For the former, the Strato design system has the <Link /> component you can use. For the latter, you can use React Router, which is also included when you bootstrap your app with dt-app.