根据 URL 渲染特定的 react 组件

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?

Answer 1

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.

Answer 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>;
}