Render specific react component based on the URL

Question

App.js

function App() {
  <div className="App">
    <Router>
      <Switch>
        <Route exact path="/home" component={Home} />
        <Route exact path="/search" component={Home} />
      </Switch>
    </Router>
  </div>;
}

Home.js

function Home() {
    const location = useLocation();
    return (
        <div className="home">
            <Component1 />
            {location.pathname === "/home" && <Feed />}
            {location.pathname === "/search" && <Search />}
            <Component2 />
        </div>
    );
}

This works perfectly as I want to render the Feed or Search component depending on the URL.

But, I want to know is it okay to use location.pathname or is there any better alternative?

Can you describe what you're trying to do in more detail? How can you be on /search if your are rendering the Home component on /home? — Alex Wayne
– Alex Wayne, Commented Jul 16, 2021 at 17:02
@AlexWayne The Home component should probably be named MainLayout or something, and various pages share this layout. — David Callanan
– David Callanan, Commented Jul 16, 2021 at 17:02
@DavidCallanan Ohh yes. Should rename the component. Am terrible at naming components. Hehe! — zx01
– zx01, Commented Jul 16, 2021 at 17:07

David Callanan · Accepted Answer · 2021-07-17 19:25:02Z

2

You could do something like:

App.js

function App() {
  return <div className="App">
    <Router>
      <Switch>
        <Route exact path="/home" component={() => <Home showFeed/>} />
        <Route exact path="/search" component={() => <Home showSearch/>} />
      </Switch>
    </Router>
  </div>;
}

Home.js

function Home(props) {
    const location = useLocation();
    return (
        <div className="home">
            <Component1 />
            {props.showFeed && <Feed />}
            {props.showSearch && <Search />}
            <Component2 />
        </div>
    );
}

This allows you to abstract away the Home component's dependency on any routing mechanism, and simply allows you to control whether certain elements appear or not from outside this component.

edited Jul 17, 2021 at 19:25

answered Jul 16, 2021 at 17:00

David Callanan

5,94815 gold badges77 silver badges128 bronze badges

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

6 Comments

David Callanan Over a year ago

@zx01 Great. Consider this answer if you'd like more flexibility (if you are always only displaying one of the components at a time).

zx01 Over a year ago

This will re-render the entire Home component. on url change. Is there any way in which only the Feed and Search components re-render based on url and the other components (Component 1 & 2) don't render and remain as it is?

David Callanan Over a year ago

@zx01 What's wrong with a re-render? I'm pretty sure (correct me if I'm wrong) that the state will remain intact between re-renders, so there should be no issue.

zx01 Over a year ago

There is nothing wrong. But am just curious whether there is any way to do that?

David Callanan Over a year ago

@zx01 No I don't think so. But even when a re-render occurs on the virtual dom, React will do a diff, so the elements shouldn't actually get re-created in the real dom.

|

underscore · Accepted Answer · 2021-07-16 17:11:37Z

2

use home component as layout. This can be highly recommended. You can rename your home component as Layout. This is more flexible way.

function Home() {
    const location = useLocation();
    return (
        <div className="home">
            <Component1 />
             { props.children }
            <Component2 />
        </div>
    );
}

In your app.js modify like bellow

function App() {
  <div className="App">
    <Router>
      <Switch>
        <Route exact path="/home">
          <Home>
           <Feed />
          </Home>
         </Route>
        <Route exact path="/search">
          <Home>
           <Search/>
          </Home>
         </Route>
        </Route>
      </Switch>
    </Router>
  </div>;
}

edited Jul 16, 2021 at 17:11

answered Jul 16, 2021 at 17:05

underscore

6,9277 gold badges44 silver badges82 bronze badges

1 Comment

underscore Over a year ago

its glad to help

Collectives™ on Stack Overflow

Render specific react component based on the URL

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related