Component not rendering after using <Link> on click

Question

I am new with React JS so I am sorry if this problem seems trivial.

I have set up a <Switch> along with a number of Routes in App.js to redirect and link components together. The first <Redirect> from App.js goes to ComponentA where when a div is clicked, it should go to ComponentB, but that is not the case. After some fiddling, I could get ComponentB to render but it was ALONG with ComponentA, and now with more changes, nothing shows up except the header .../componentB.

App.js

import { ComponentA, ComponentB } from './components/Component.js';
import { BrowserRouter as Router, Route, Redirect, Switch} from 'react-router-dom';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  
  return (
    <div>
      <Router exact path="/">
        <Switch>
          <Route exact path="/componentA" component={ComponentA}/>
          <Route exact path="/componentB" component={ComponentB}/>      
          <Route exact path="/componentC" component={ComponentC}/>  
        </Switch>  
        {isLoggedIn ? <Redirect to="/componentA"/> : <Redirect to="/componentC"/>}
        // componentC is irrelevant to the question
      </Router>
    </div>
  );
}

ComponentA

import { BrowserRouter as Router, Route, Redirect, Switch} from 'react-router-dom';

function ComponentA() {  
  return (
    <div>
      <Router exact path="/">
        // ... code
        <Link exact to="/componentB">
           <div></div>
        </Link>
      </Router>
    </div>
  );
}

ComponentB (in the same file as ComponentA)

function ComponentB() {
  return (
    <div>Welcome to ComponentB</div>
  );
}

Drew Reese · Accepted Answer · 2021-05-05 05:46:58Z

1

Issue

I think the second Router component rendered in ComponentA is jacking the link navigation. This "inner" routing context handles the navigation request and updates the URL in the address bar but doesn't allow the "outer" routing context to see the change and update the Route that is matched and rendered.

Solution

Remove the Router in ComponentA, also remove the exact prop from the Link as it's not a link prop.

import { Link } from 'react-router-dom';

function App() {  
  return (
    <div>
      // ... code
      <Link to="/componentB">
        <div></div>
      </Link>
    </div>
  );
}

Remove the exact and path props from Router, these are props for Route components.

import { ComponentA, ComponentB } from './components/Component.js';
import { BrowserRouter as Router, Route, Redirect, Switch} from 'react-router-dom';

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  
  return (
    <div>
      <Router>
        <Switch>
          <Route exact path="/componentA" component={ComponentA}/>
          <Route exact path="/componentB" component={ComponentB}/>      
          <Route exact path="/componentC" component={ComponentC}/>  
        </Switch>  
        {isLoggedIn ? <Redirect to="/componentA"/> : <Redirect to="/componentC"/>}
        // componentC is irrelevant to the question
      </Router>
    </div>
  );
}

Update

You need only one routing context for your application, typically a Router that wraps App component. Comb your code for any other nested Router components and remove them as these will mess with navigation as explained above.

edited May 5, 2021 at 5:46

answered May 5, 2021 at 4:21

Drew Reese

207k20 gold badges282 silver badges293 bronze badges

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

6 Comments

Patrick Schick Over a year ago

okay so apparently, when I click on it the first time, there is nothing but once I go back and then click again, I can view everything. Any logical explanation for this behaviour?

Drew Reese Over a year ago

@ShlokJain If you're still having issues getting these components and links to work then I invite you to try creating a running codesandbox that reproduces the navigation issue and I can take a better look.

Patrick Schick Over a year ago

no no, I looked at the entire module and found out that, I was declaring another <Router> in ComponentC. Ironic huh (the process leading to Component A/B is through C as well)

Patrick Schick Over a year ago

Although I actually had a doubt, so in ComponentB, I show individual "posts", now if I declare my route earlier in the Web App, would I not be able to add an id in the header of the route?

Patrick Schick Over a year ago

no I haven't programmed it yet, but I was intrigued as to if this problem would even arise

|

Collectives™ on Stack Overflow

Component not rendering after using <Link> on click

1 Answer 1

Issue

Solution

Update

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Issue

Solution

Update

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related