Polaris component for structuring elements - including other components - in table

Highlighted
Shopify Partner
10 0 0

Hi guys,

 

I'm working on a Shopify app using React and Shopify Polaris. So far, I created two components, index and add. Index component contains a page with an Empty State if no information is available and the add component contains a form. 

 

Right now, I'm using ngrok for testing. If I'm on index component and hover over the add rule button, I get a link like this "https://123456.ngrok.io/add". I don't want it like this. I just want to have something like "https://shop.myshopify.com/admin/apps/appname/add". And when I'll click on the return button to have something like "https://shop.myshopify.com/admin/apps/appname/".

How can I handle these links using React and Shopify Polaris?

 

INDEX COMPONENT

class Index extends React.Component {
render() {
return (
<Page>
<Layout>
<EmptyState
heading="Add rule"
action={{
content: "Add Rule",
url: "/add"
}}
>
<p>Automatically add how many rules you want.</p>
</EmptyState>
</Layout>
</Page>
);
}
}
 
ADD COMPONENT
class Add extends React.Component {
render() {
return (
<Page
primaryAction={{ content: "Save" }}
secondaryActions={[{ content: "Return", url: "/" }]}
title="Add Rule"
>
<p>Test content.</p>
</Page>
);
}
}
 
 
0 Likes