Question

我有一个标头，并且在我内部有Link组件可以浏览任何页面，并且该标头需要在所有路径上显示，我将Header组件放在switch方法内，因为我内部有组件。但标头组件是单独呈现的，其他组件则不呈现，而仅标头组件。

class App extends Component {
    render() {
        return (
            <div>
                <BrowserRouter>
                    <Switch>
                        <Header/>
                        <Route path={'/'} exact={true} component={Main}/>
                        <Route path={'/cursos'} exact={true} component={Cursos}/>
                        <Route path={'/forum'} exact={true} component={Forum}/>
                        <Route path={'/login'} exact={true} component={Login}/>
                    </Switch>
                </BrowserRouter>
                <Footer/>
            </div>
        );
    }
}

Answer 1

尝试这样的事情：

class App extends Component {
    render() {
        return (
            <div>
                <BrowserRouter>
                  <React.Fragment>
                    <Header/>
                    <Switch>                        
                        <Route path={'/'} exact={true} component={Main}/>
                        <Route path={'/cursos'} exact={true} component={Cursos}/>
                        <Route path={'/forum'} exact={true} component={Forum}/>
                        <Route path={'/login'} exact={true} component={Login}/>
                    </Switch>
                  </React.Fragment>
                </BrowserRouter>
                <Footer/>
            </div>
        );
    }
}

Switch旨在仅渲染一个孩子（第一个匹配的孩子）。

向所有路由声明组件react-router

1 个答案: