React: How to get variable from URL?

Question

I'm building an application that needs to load a "workspace" from the database based on the slug provided in the URL. My URL structure is /app/<workspace slug>/<workspace view>. Currently there are 3 views for each workspace: Map, List and Settings. I need to get the value of the <workspace slug> from the URL in order to load the correct workspace from the database. Also I need to return an error if the workspace is not found.

I'm pretty new to React so I may not currently be following best practices.

My Routing

Currently I'm routing to each workspace view by looping through each workspace and creating a route for each of the 3 views in App.js:

renderContent() {
    return (
        <Switch>
            <Route path="/" component={NetworkMap} exact />
              {this.state.workspaces.map(function(workspace, index){ // Map View Routes
                return (
                  <Route path={"/app/" + workspace.slug + "/map"} render={(props) => <Workspace {...props} workspace={workspace} component={Map} />} />
                );
              })}
              {this.state.workspaces.map(function(workspace, index){ // List View Routes
                return (
                  <Route path={"/app/" + workspace.slug + "/list"} render={(props) => <Workspace {...props} workspace={workspace} component={List} />} />
                );
              })}
              {this.state.workspaces.map(function(workspace, index){ // Settings View Routes
                return (
                  <Route path={"/app/" + workspace.slug + "/settings"} render={(props) => <Workspace {...props} workspace={workspace} component={WorkspaceSettings} />} />
                );
              })}
            <Route component={Error} />
        </Switch>
    );
}

My Links

{props.workspaces.map(function(workspace, index){
  return (<Link key={index} to={"/app/" + workspace.slug + "/map"} className="dropdown-item cursor-pointer">{workspace.name}</Link>);
})}

My Index.js

<BrowserRouter>
    <App />
</BrowserRouter>

I've tried changing workspace.slug to :slug in the Route's path which I thought should make it appear in props but I can't seem to get it working properly:

{this.state.workspaces.map(function(workspace, index){
  return (
    <Route path={"/app/:slug/map"} render={(props) => <Workspace {...props} workspace={workspace} component={Map} />} />
  );
})}

Drew Reese · Accepted Answer · 2020-04-07 04:20:25Z

1

match

Components rendered via the render prop will also be passed some route props, specifically, match is the one you want. From there props.match.params.slug will be the slug value you want

{this.state.workspaces.map(function(workspace, index){
  return (
    <Route
      path="/app/:slug/map"
      render={props => (
        <Workspace
          {...props}
          workspace={workspace}
          component={Map}
          slug={props.match.params.slug}
        />
      )}
    />
  );
})}

match can also be access within the component Workspace via the spread in props. If Workspace is a functional component, react-router-dom also has a useParams hook.

answered Apr 7, 2020 at 4:20

Drew Reese

207k19 gold badges279 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Brack Over a year ago

Thanks for the response. Sounds like the right direction, however this is in my App.js component, and using this.props.match.params.slug gives the error TypeError: Cannot read property 'params' of undefined

Brack Over a year ago

Am I missing an import statement perhaps?

Drew Reese Over a year ago

@Brack No, these are route props that any Route passes to anything rendered by the render prop. Mind sharing what your Router code looks like in App.js?

Drew Reese Over a year ago

Eh, sorry, I guess I assumed you were using react-router-dom. What navigation are you using?

Brack Over a year ago

I updated the router section to include all my routing code. I am using react-router-dom import {Route, Switch} from "react-router-dom"

|

Collectives™ on Stack Overflow

React: How to get variable from URL?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related