时间戳

首页 > 解决方案 > 为什么一个组件的模板扩展了另一个组件的模板？

reactjs - 为什么一个组件的模板扩展了另一个组件的模板？

问题描述

为什么AppDetail扩展AppsList, ofVersionDetail扩展AppDetailand AppsList？

应用程序.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;

应用列表

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

应用详情

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;

标签： reactjsreact-router

解决方案

用于Switch停止匹配任何其他路线。也用于exact匹配确切的路径。

它正在渲染所有内容，因为模式匹配：https ://reacttraining.com/react-router/web/api/Switch

关于为什么exact https://reacttraining.com/react-router/web/api/Route/exact-bool 您可能只使用 usingexact但 Switch 会使其更具可读性和明确性。

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;

推荐阅读