I'm getting back into react after a few months, so kinda rusty on it atm. I have a site with Home, About, Contact component, when the user lands on my site I want the home page to be the landing page. 

I have an index.js page that is taking care of my routes using react-router-dom

```
  <Provider store={store}>
   <div className='container'>
    <BrowserRouter>
     <div>
      <Route path='/' component={App} />
      <Route path='/Home' component={Home} />
      <Route exact path='/About' component={About} />
      <Route exact path='/Contact' component={ContactView} />
     </div>
    </BrowserRouter>
   </div>
  </Provider>

```

My App component contains my menu 

```
class App extends Component {
 constructor(props) {
    super(props);
    this.state = { activeItem: 'Home' }
  }

  componentDidMount() {this.setState({ activeItem: 'Home' })}

  handleItemClick = (e, { name }) => this.setState({ activeItem: name });

  render() {
   const { activeItem } = this.state;
    return (
      <div>
         <Menu pointing secondary color='blue' stackable={true}>
           <Link to='/Home'>
             <Menu.Item name='Home' to="/Home" active={activeItem === 'Home'} onClick={this.handleItemClick} />
           </Link>
           <Link to={'/About'}>
             <Menu.Item name='About' to="/About" active={activeItem === 'About'} onClick={this.handleItemClick} />
           </Link>
           <Link to={'/Contact'}>
             <Menu.Item name='Contact' to="/ContactView" active={activeItem === 'ContactView'} onClick={this.handleItemClick} />
           </Link>
         </Menu>
      </div>
        );
  }
};

export default App;

```

Since the App component's *path='/'* it's always visible and when the user lands on my site the only thing that's active is the menu such as below.
[![enter image description here](https://i.stack.imgur.com/y1tmq.png)](https://i.stack.imgur.com/y1tmq.png)

When a user opens my site, how can I make the landing page to go directly to /Home and have the menu active at the same time?