Why <Route component={Menu}/> instead of <Menu />?

Question

I have a submenu with Routes in my /About.
This submenu is called AboutMenu and is present at all pages under /About like => /About/Company and /About/Info.

An exercise example shows <Route component={AboutMenu} /> with activeStyle={match.isExact && selectedStyle}> and i just used <AboutMenu /> and added exact to my AboutMenu Links instead.

Why would you use <Route component={AboutMenu} /> instead of just rendering <AboutMenu />?

export const AboutMenu = (props) => {

    return (
        <div>
            <li>
                <NavLink exact to='/About' activeStyle={ activeStyle}> Company </NavLink>
            </li>
            <li>
                <NavLink to='/About/History' activeStyle={activeStyle}> History </NavLink>
            </li>
            <li>
                <NavLink to='/About/Vision' activeStyle={activeStyle}> Vision </NavLink>
            </li>
        </div>
    )
}

about section

const About = (props) => {

    return(
        <Template>
            <AboutMenu />
            {/* OR <Route component={AboutMenu} /> ?*/}
            <Route exact path='/About' component={Company} />
            <Route path='/About/History' component={History} />
            <Route path='/About/Vision' component={Vision} />
        </Template>
    )
}

export default About

Answer 1

<Route> with no path will always match. So, both

<AboutMenu />

and

<Route component={AboutMenu} />

will result in the AboutMenu component always rendered. That is, in this particular case you can use either of them interchangeably.

However, there is a difference between the two in cases where the <Switch> component is used. Look at this example:

  <Switch>
    <Route path="/" exact component={Home}/>
    <Route path="/will-match" component={WillMatch}/>
    <Route component={NoMatch}/>
  </Switch>

Here,

<Route component={NoMatch}/>

comes last, and it will only match if no routes matched before it, acting like the default case of the traditional switch statement in many programming languages. It will not match if one of the two routes above it matches, and subsequently the NoMatch component will not be rendered. If instead the last route there was just

<NoMatch />

the NoMatch component would always be rendered.