Question

我启动了一个具有主要应用程序组件的create-react-app，该组件使用BrowserRouter过滤路由。

App.jsx
import Routes from './Routes.jsx';
const App = () => (
  <Router history={history}>
    <div className="container">
      <Route path="/:filter?" component={Routes} />
    </div>
  </Router>
)

和“路线”组件

Routes.jsx
const Routes = () => (
  <Router>
    <div className="container">
      <Route exact path="/" component={Main} />
      <Route path='/charities' component={Charities} />
      <Route path='/news' component={News} />
    </div>
  </Router>
);

我首先尝试将App div包装在一个“容器”类中，该类将CSS网格设置为：

styles.css
.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 10px;
}

即使导航div（来自单独的组件）具有以下样式，也会将所有内容放在第一列中，而将其他11列留空：

.navigation {
  grid-column: 1 / -1;
  grid-row: 2 / 3;
}

当我将Routes div包装在“容器”类中（并将其从App div中删除）时，也会发生这种情况。

如果我将每个组件都包装在“容器”类中，则可以使用它，但是我想我的问题是，有没有一种方法可以将整个页面包装为CSS网格一次？在我看来，在这样一个类中包装第一个div（所有其他组件都位于该分区下）可以做到这一点，但是显然这对我来说不是。谢谢！

在多组件React布局中使用CSS Grid

0 个答案: