0

<Router>
  <div>
    <Route exact path="/" component={App}/>
    <Route exact path='/' component={Home}/>
    <Route path="/Project" component={Project}/>
  </div>
</Router>
)

how home component render in App component as a child (alternative 'IndexRoute')

Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400
None
  • 13
  • 2
  • Possible duplicate of [Specify Child Routes in react-router v4](https://stackoverflow.com/questions/44452858/specify-child-routes-in-react-router-v4) – Shubham Khatri Jul 31 '17 at 20:14

2 Answers2

1

The simplest answer is just to move Home into the render() method of your app, like so:

class App extends Component {
    render() {
        return (
            <Home />
        );
    }
}

Then, in your routes at the top, you could just have this: 

<Router>
  <div>
    <Route exact path="/" component={App}/>
    <Route path="/Project" component={Project}/>
  </div>
</Router>

However, it depends on what you want to do, exactly. Does the App always have Home as a child component? Otherwise, you can nest your inner component within the router like so:

This would set the props.children of the App to be the specific component that you are trying to use. That could be then used within your App like so:

class App extends Component {
    render() {
        return (
            <MyHeaderComponent />
            {this.props.children}
            <MyFooterComponent />
        );
    }
}
AnilRedshift
  • 7,937
  • 7
  • 35
  • 59
-1

In the code below navigating to / will render App component with Home as its child

<Route path="/" component={App}>
  <IndexRoute component={Home}/>
  <Route path="project" component={Project}/>
</Route>
Bharath S
  • 364
  • 4
  • 10