How to do navigation via button in react - app engine

kwangxi — Tue, 30 May 2023 10:25:07 GMT

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>

Re: How to do navigation via button in react - app engine

robaxelsen — Tue, 13 Jun 2023 07:18:10 GMT

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.

topic Re: How to do navigation via button in react - app engine in Developer Q&A Forum

How to do navigation via button in react - app engine

Re: How to do navigation via button in react - app engine