React-Router-Dom: Make Home The Landing Page

Question

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.

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?

Answer 1

First of all, make sure you are using ReactRouterDom (ReactRouter v 4.0 +). In ReactRouterDom, you can achieve this by using a Switch. What Switch does is, it goes through all the routes, and renders the component according to the paths specified. At the end, you can add one more line, that will redirect it to the specified path, if none of the path specified is met.

Just before the end of your closing <Switch> component, add this line -

<Route path="*" component={Home} />

If you want to see the live demonstration, I've built a pen for you. You can check the code at this codepen link - https://codepen.io/anon/pen/RxgVqM

Answer 2

All you have to do is place the home component inside the App Component. I would also suggest creating a navbar component to modularize more.

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>
<HomeComponent/>
      </div>
        );
  }

And here is an example of something I did in one of my projects with Redux.. The only difference here is with the example code below I'm using the app level to only render based on conditional values (if auth show home else show login, etc)

render() {
        return (
            <div className='home'>

                <BrowserRouter>
                    <div>

                        {this.props.auth ?
                            <NavBar /> :
                            undefined}

                        <Switch>

                        <Route exact path="/encyclopedia" component={() => this.props.auth ? <Encyclopedia /> : <Redirect to='/login' />} />
                        <Route exact path="/login" component={() => !this.props.auth ? <SignInScreen /> : <Redirect to='/' />} />
                        <Route exact path="/" component={() => this.props.auth ? <Home /> : <Redirect to='/login' />} />
                        <Route exact path="/bikes" component={() => this.props.auth ? <BikeContainer /> : <Redirect to='/login' />} />
                        <Route component={() => <FourOhFour/>}/>

                        </Switch>

                    </div>
                </BrowserRouter>
            </div>
        )
    }

Answer 3

<Route path="/" element={ (lessthanSign)Navigate to="/home" />} />

Use above code to navigate directly to home. Also you need to choose another page name when showing app component.

I have used lessthanSign for < as the whole text was omitted when typing answer.