Routing with variable matching

[seanmccay]

How can I add routing for a resource and pass and Id in the url? You don't have any documentation on the new routing scheme where you are passing them all in as objects and mapping them to route components. It seems to push all of my routes to the sidebar as links.

I need to add a route that catches /objects/:objectId. I need the /objects route to be a sidebar link and render my component that has a big data table with links to other individual objects like /objects/888.

This was my previous solution in the free version

render() {
   const ObjectsSwitch = () => (            
            <Switch>            
                <Route exact path="/objects" component={Objects}/>            
                <Route path="/objects/:objectId" component={Object}/>            
            </Switch>            
        );
    return (
            <Switch>                
                <Route path="/objects" component={ObjectsSwitch}/> 
            </Switch>
        );
}

And I had also added code to have a sidebar link that leads to the /objects path.

How do I mirror that same behavior within the routes/app.jsx and routes/dash.jsx files?

[einazare]

Hello @seanmccay . Like in the free version where you did <Route path="/objects/:objectId" component={Object}/> you can add in routes/dash.jsx a line for importing your component import Object from 'path/to/Object'; and then in the routes object a line like { path: "/object/:objectId", name: "ObjectName", icon: "object-icon", component: Object }, If you navigate to src/containers/Dash.jsx you will see that we import this routes object and we create out of this the routes for dashboard pages. So at the end
{ path: "/object/:objectId", name: "ObjectName", icon: "object-icon", component: Object }, will become <Route path="/object/:objectId" component={Object} /> (see line 127 in src/containers/Dash.jsx). We than import the same routes in our sidebar to create the sidebar links and in our header to create the navbar brand. We did this because it was easier to change a line just in a file (routes/dash.jsx), instead of changing three lines (one line for the Route part in src/containers/Dash.jsx, one in src/components/Sidebar/Sidebar.jsx and one in src/components/Header/Header.jsx to crate the navbar brand).

I hope that information helps you. Please let us know if we can help you with anything else.

All the best, Manu

[seanmccay]

@EINazare, I got it working again. I used the switch constant that I described earlier and passed it as the component. I just had to make sure to import React from 'react' and Switch and Router from 'react-router-dom'.

Will you include documentation on that in the future?

Thanks!

[einazare]

@seanmccay i'm glad that everything is fine now. We are going to add some documentation on the map routing as soon as we can. If we can help you with anything else, let us know.

All the best, Manu.