代码之家 › 专栏 › 技术社区 › Davi Resio

向所有路由器声明组件

react-router reactjs

0

Davi Resio · 技术社区 · 7 年前

我有一个标题,在它里面我有链接组件来导航任何页面,标题需要显示在所有路由上,我把标题组件放在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>
        );
    }
}

1 回复 | 直到 7 年前

1

2

marzelin 7 年前

试着这样做:

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 仅渲染一个子对象(匹配的第一个子对象)。