Using Menu command with react-router

UI Components for React
Post Reply
wjustin
Posts: 7
Joined: 18 Jul 2018, 00:49

18 Jul 2018, 18:45

Hello,

I have build a primereact project on top of create-react app and works when developing the app. However, when I build the app for production my links in the primereact menu no longer work. So basically it looks like the "command:" callback method doesn't seem to work. I have a router set up in my App.js file that looks like this:

Code: Select all

<Router basename={'/ReactAppLocal'}>
        <div className="App">
        <Route path ="/" exact component={Dashboard}/>
           <Route path ="/NewFieldOrderSearch" component={NewFieldOrderSearch}/>
           </div>
          </Router
My menu items for populating the primereact menu component:

Code: Select all

let items= [
            {
                label: 'Field Order',
                icon: 'fa fa-fw fa-file-o',
                items: [
                    { label: "New", icon: 'fa fa-fw fa-plus', command: () => {window.location = "/NewFieldOrderSearch"} },
                    { label: "Search", icon: 'fa fa-fw fa-search', command: () => { window.location = "/" } },
                ]
            }
        ];
The "command: () => {window.location = "/NewFieldOrderSearch"}" works when developing on localhost:3000, but as soon as I build and I put it onto a different server, the callback method tries to change the window location, but I end up with 404 error on all of my links. Any help is greatly appreciated.

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

19 Jul 2018, 10:02

Command is an event to implement what will happen on clicking the menu, since PrimeReact cannot depend on any router library, it is better to check the router docs to find out how to programmatically change the router. For example, for Ultima we do;

Code: Select all

{label: 'Forms', icon: 'input', command:()=>{ window.location = "#/forms"}},
This one uses hash strategy though, you may need to setup your server settings as well if you are not using hash strategy so all routes are forwarded to index page. Some more info;

https://stackoverflow.com/questions/421 ... -router-v4

wjustin
Posts: 7
Joined: 18 Jul 2018, 00:49

19 Jul 2018, 22:55

Hello and thank you for the response. I switched over to a HashRouter and I was able to accomplish this. We are using a JBoss server, so the BrowserRouter provided by react-router wasn't working for me.

For anyone else that is having similar issues, here are a couple of articles that helped me along the way in getting react, routing and primereact working together:

react-router git hub forum:
https://github.com/ReactTraining/react- ... ssues/5975

Deploying an app to a sub folder on your server:
https://stanko.github.io/react-router-s ... on-server/

Hope these help someone as they took me a lot of digging to find.

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests