问题

我正在尝试学习React。我想从Bootstrap组件创建一个简单的模板，但是在编译时React看不到这些组件。

app.js
```jsx
import React from "react";
import { BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import Layout from './hocs/Layout';
import Home from './components/Home';
import Blog from './components/Blog';
import BlogDetail from './components/BlogDetail';
import Category from './components/Category';

function App() {
    return(
        <Router>
            <Layout>
                <Routes>
                    <Route exact path='/' component={Home} />
                    <Route exact path='/blog' component={Blog} />
                    <Route exact path='/blog/:id' component={BlogDetail} />
                    <Route exact path='/category/:id' component={Category} />
                </Routes>
            </Layout>
        </Router>
    );
};

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>
);

Home.js

import React from "react";

function Home(){
    return(
        <div className="card mb-3">
            <div className="row g-0">
                <div className="col-md-4">
                </div>
                <div className="col-md-8">
                    <div className="card-body">
                        <h5 className="card-title">Card title</h5>
                        <p className="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                        <p className="card-text"><small className="text-muted">Last updated 3 mins ago</small></p>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default Home;

import Navbar from '../components/Navbar';

const Layout = (props) =>(
    <div>
        <Navbar />
        {props.children}
    </div>
);

export default Layout

附注：React可以识别Navbar组件，但Home组件却不能。即使内容相同，在浏览器控制台中也没有代码。每个路由都应显示布局的导航栏，并加载由路由调用的组件。 Layout和Navbar被React识别，但其他所有组件甚至在浏览器控制台中都没有显示。

<details>
<summary>英文:</summary>

I&#39;m trying my hand at studying react. I want to create a simple template from bootstrap components, but react doesn&#39;t see the components when compiling.

app.js

import React from "react";
import { BrowserRouter as Router, Route, Routes} from 'react-router-dom';
import Layout from './hocs/Layout';
import Home from './components/Home';
import Blog from './components/Blog';
import BlogDetail from './components/BlogDetail';
import Category from './components/Category';

function App() {
return(
<Router>
<Layout>
<Routes>
<Route exact path='/' component={Home} />
<Route exact path='/blog' component={Blog} />
<Route exact path='/blog/:id' component={BlogDetail} />
<Route exact path='/category/:id' component={Category} />
</Routes>
</Layout>
</Router>
);
};

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

Home.js

import React from "react";

function Home(){
return(
<div class="card mb-3">
<div class="row g-0">
<div class="col-md-4">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
);
};

export default Home;

import Navbar from '../components/Navbar'

const Layout = (props) =>(
<div>
<Navbar />
{props.children}
</div>
);

export default Layout

p.s. Navbar react sees, but the home component does not. There is no code even in the console, although they are identical in content.


Each route should show the layout navbar and load the component that is called by the route. Layout and Navbar are seen by the reactor, but everything else is not even reflected in the browser console.

</details>


# 答案1
**得分**: -1

你可以升级到 [v6][1] 并在你的 `Layout` 中使用一个 [`Outlet`][2] 组件来实现你想要的效果，使用 react-router-dom。

当子路由被渲染时，`Outlet` 允许嵌套的 UI 显示出来。

```javascript
import { Outlet } from 'react-router-dom';

import Navbar from '../components/Navbar';

const Layout = () => {
  return (
    <div>
      <Navbar />
      <main>
        <Outlet />
      </main>
    </div>
  );
};

export default Layout;

此外，你的 App 组件需要像这样重构：

function App() {
  return(
    <Router>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path='blog' element={<Blog />} />           
          <Route path='blog/:id' element={<BlogDetail />} />
          <Route path='category/:id' element={<Category />} />
        </Route>
      </Routes>
    </Router>
  );
};

v6: https://reactrouter.com/en/main/upgrading/v5
Outlet: https://reactrouter.com/en/main/components/outlet

import { Outlet } from 'react-router-dom';

import Navbar from '../components/Navbar'

const Layout = () => {
  return (
    <div>
      <Navbar />
      <main>
        <Outlet />
      </main>
    </div>
  );
};

export default Layout;

function App() {
  return(
    <Router>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path='blog' element={<Blog />} />           
          <Route path='blog/:id' element={<BlogDetail />} />
          <Route path='category/:id' element={<Category />} />
        </Route>
      </Routes>
  </Router>
  );
};