CODEWITHSUNDEEP
reactjsreact-router
David Morin
David Morin

Reputation: 397

React Router 4 - Issues Rendering Nested Link

I am new to the React scene and after about a week of surfing solutions and tutorials, have been unable to solve this issue.

I have the following structure with expected results:

I have followed along with this tutorial: https://reacttraining.com/react-router/web/example/basic with the exception of using the "match" params for now b/c it seems I'm not using them correctly on codesandbox, which I'm also a newbie at.

Actual Results

When clicking the first "Users List" link, it displays the list fine, but also renders the "UserDashboard" component below the list.

Clicking on one of the user links updates the url, but brings you to a blank page.

Code as is for index.js:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router- 
dom";
import Users from "./Users";
import UserDashboard from "./UserDashboard";

import "./styles.css";

function App() {
  return (
    <Router>
      <div className="App">
        <ul>
          <li>
            <Link to="/users/">Users List</Link>
          </li>
        </ul>

        <Switch>
          <Route exact path="/users/" component={Users} />          
        </Switch>
      </div>
    </Router>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Users.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router- 
dom";
import UserDashboard from "./UserDashboard";

function Users({ match }) {
  return (
    <div>
      <ul>
        <li>
          <Link to="/1">John Smith</Link>   
        </li>
        <li>
          <Link to="/2">Alex Rogers</Link>
        </li>
        <li>
          <Link to="/3">Ignacio Don</Link>
        </li>
      </ul>
      <Route path="/:id" component={UserDashboard} />
    </div>
  );
}

export default Users;

UserDashboard.js

import React from "react";
import ReactDOM from "react-dom";

function UserDashboard({ match }) {
  return (
    <div>
      <h3>Route Test</h3>
      <h3>{match.params.topicId}</h3>
    </div>
  );
}

export default UserDashboard;

The idea down the line is of course to produce all this with actual data using graphQL but until I fix this (likely obvious) issue I can't proceed.

Link to a demo version of code above:

https://codesandbox.io/embed/oxx1v2ylyq

Upvotes: 1

Views: 274

Answers (1)

seanulus
seanulus

Reputation: 885

In index.js I changed a couple lines,

<Link to="/users">Users List</Link>

and

<Route path="/users" component={Users} />

Taking out the exact in your route and removing the slashes at the end of users.

In Users.js, I changed your Links and Routes to be like the example on react training

<Link to={`${match.url}/1`}>John Smith</Link>
<Route path={`${match.path}/:id`} component={UserDashboard} />

And in UserDashboard.js, I changed

<h3>{match.params.topicId}</h3>

to

<h3>{match.params.id}</h3>

I think what was happening was that the router was matching /users in your switch statement because of the exact property. I hope this is the desired behavior you were looking for.

Edit

To get the components to switch out when you click on the user move

<Route path='/users/:id' component={UserDashboard} />

From Users.js to index.js inside the Switch component and below

<Route exact path="/users" component={Users} />

Notice exact is back in the /users route. This will ensure that the /users route needs to match.

Upvotes: 1

Related Questions