Ad

Why Template Of One Component Extends Template Of Another Component?

- 1 answer

Why does AppDetail extend the AppsList, of VersionDetail extends the AppDetail and AppsList?

App.js

function App() {
    return (
        <BrowserRouter>
            <Route path='/' component={AppsList} />
            <Route path='/:id' component={AppDetail} />
            <Route path='/:id/:version_id' component={VersionDetail} />
        </BrowserRouter>
    );
}
​
export default App;

AppList

class AppsList extends Component {
    render() {
        return (
            <div>
                <h1>Applications</h1>
            </div>
        );
     }
}
​
export default AppsList;

AppDetail

class AppDetail extends Component {
​
    render() {
        return (
            <div>
                <input type="text" id="version-id" placeholder="Enter a id of version" />
                <input type="text" id="version-title" placeholder="Enter a title of version" />
                <button type="submit" onClick={this.addVersion}>Add</button>
            </div>
        );
     }
}
​
export default AppDetail;
Ad

Answer

Use Switch to stop matching any additional routes. Also use exact to match the exact path.

It is rendering all because the pattern is matching: https://reacttraining.com/react-router/web/api/Switch

on why exacthttps://reacttraining.com/react-router/web/api/Route/exact-bool You can probably get away with only using exact but Switch will make it more readable and explicit.

function App() {
    return (
        <BrowserRouter>
          <Switch>
            <Route path='/' exact component={AppsList} />
            <Route path='/:id' exact component={AppDetail} />
            <Route path='/:id/:version_id' exact component={VersionDetail} />
          </Switch>
        </BrowserRouter>
    );
}
​
export default App;
Ad
source: stackoverflow.com
Ad