React-Router Switch component not rendering components with same path

Question

I recently implemented the react-router Switch component into my routes in order to render a NoMatch component (which is just a 404 error component). However, after implementing this into my routes I noticed that on my home page only 1 component will render, the Heading component.

Both Heading and SearchBar should render to the same path.

My code below:

const routes = [
  {
    path: "/",                   
    exact: true,
    component: () => <Heading />
  },
  {
    path: "/",                      
    exact: true,
    component: () => <SearchBar />
  },
  {
    component: NoMatch
  }
];

class App extends Component {

  render() {
    return (
      <div>
        <BrowserRouter>
          <div>
            <MenuBar />
            <Switch>
              {routes.map((route, index) =>
                <Route
                  key={index}
                  path={route.path}
                  exact={route.exact}
                  component={route.component}
                />
              )}
            </Switch>
          </div>
        </BrowserRouter>
      </div>
    );
  }
}

I noticed if I remove the Switch component then everything will render just fine, but then the NoMatch component will also render to the route.

Question: Why can't I render multiple components on the same path inside of Switch? How can I fix this problem when I need to render both Heading, and SearchBar component on the "/" path?

Mayank Shukla · Accepted Answer · 2017-09-02 02:42:36Z

2

I think you are missing how Switch works.

Switch will start looking for a matching Route, whenever it will find a match it will stop looking for matches and render that particular component.

Always define unique routes, if you want to render multiple component for same path then wrap all of them by a div.

Write it like this:

const routes = [
  {
    path: "/",                   
    exact: true,
    component: () => <div> <Heading /> <SearchBar /> </div>
  },
  {
    component: NoMatch
  }
];

edited Sep 2, 2017 at 2:42

answered Sep 2, 2017 at 2:28

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

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

1 Comment

Phil Over a year ago

Thank you for solving another one of my issues, yet again lol!

Mikkel · Accepted Answer · 2017-09-02 02:28:09Z

0

The Switch component only allows one route - basically each child route has an implicit exact attribute.

So you need to remove it for your purposes, and your experimentation confirms that

answered Sep 2, 2017 at 2:28

Mikkel

7,7773 gold badges20 silver badges32 bronze badges

Collectives™ on Stack Overflow

React-Router Switch component not rendering components with same path

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related