How to maintain multiple pages in a Splunk app, or is there a limitation of using React with Splunk?

[cabutler10]

We would like to use React to create a frontend for our Splunk App. We were able to integrate react and react-router to create and route to different pages successfully (ie myApp/eventPage), however on page refresh Splunk is unable to maintain the current route and we get a 404 page. 

page refresh at /myApp --> works

page refresh at /myApp/eventPage --> 404

This is also an issue if we would like users to be able to navigate to a specific page of our app from an external link. 

Do you have an example or documentation on how to maintain multiple pages in a splunk app? Or is this a known limitation of using React with Splunk?

Thanks in advance for your time and help!

[ryanoconnor]

Hello @cabutler10 

Thanks for your question here. My first question to you is have you looked at our documentation over on the Splunk UI Site? There are two subpages I would call out:

• https://splunkui.splunk.com/Packages/create/Overview
• https://splunkui.splunk.com/Create/AppTutorial

The idea of "pages" when it comes to Splunk vs React is a little bit funky. But it should be doable if you marry the two together. The tutorial above will help you generate a Hello World style Splunk app with a page. We do have plans to improve @splunk/create to help users easily generate a second page in their app via a CLI. However today you can do it quite easily as well with a generated @splunk/create app. Documentation below:

In the below example I'm adding a new page called "test".

1. To start, you'd need to add three files which are lighted in the screenshot. You could copy all of the files from "start" to make this easier.
2. The only change you'd need to make in the xml file is changing the template parameter from 

template="dev-testing-app:/templates/start.html"

to

template="dev-testing-app:/templates/test.html"

As a bonus, feel free to take a look at our popular @splunk/react-ui library.