Question

为什么AppDetail扩展AppsList，为什么VersionDetail扩展AppDetail和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;

Answer 1

使用Switch停止匹配任何其他路由。还可以使用exact来匹配确切的路径。

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

为何exact https://reacttraining.com/react-router/web/api/Route/exact-bool 您可能只使用exact就可以摆脱困境，但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;

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

1 个答案: