reactjs 在Outlet中显示默认组件

mf98qq94 于 2023-02-18 发布在 React

关注(0)|答案(2)|浏览(621)

如何在Outlet中显示默认组件？我在index.js中有以下内容：

ReactDOM.render(
  <React.StrictMode>
      <BrowserRouter>
          <Routes>
              <Route path="/" element={<App/>}>
                  <Route path="page1" element={<Page1/>}/>
                  <Route path='page2' element={<Page2/>}/>
              </Route>
          </Routes>
      </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

下面是App.js：

function App() {
  return (
    <div className="App">
        <Link to='/'>Home</Link> {' '}
        <Link to='/page1'>Page 1</Link> {' '}
        <Link to='/page2'>Page 2</Link>

        <main>
            <Outlet/>
        </main>
    </div>
  );
}

当我单击Page 1或Page 2链接时，组件Page1或Page显示在Outlet中。当在根路由（“/”）时，我希望显示默认组件，如Outlet中的<p>Home</p>。

reactjs

来源：https://stackoverflow.com/questions/69900796/show-default-component-in-outlet

2条答案

按热度按时间

eimct9ow1#

Outlet组件仅用于呈现子路由内容，它是一种占位符，由于除了Outlet之外没有其他内容，因此/路由中除了链路之外不会呈现任何内容。

ReactDOM.render(
  <React.StrictMode>
     <BrowserRouter>
        <App/>
    </BrowserRouter>
  </React.StrictMode>,
 document.getElementById('root')
);

function App() {
   return (
     <div className="App">

       <nav>
         <Link to='/'>Home</Link> {' '}
         <Link to='/page1'>Page 1</Link> {' '}
         <Link to='/page2'>Page 2</Link>
       </nav>

        <Routes>
           <Route path="/" element={<Home/>} />
           <Route path="page1" element={<Page1/>}/>
           <Route path='page2' element={<Page2/>}/>
        </Routes>
    </div>
    );
   }

赞(0）回复(0）举报 2023-02-18

6pp0gazn2#

反斜杠指向路由的根目录，因此位于其中的任何组件都将显示为根目录

ReactDOM.render(
  <React.StrictMode>
       <BrowserRouter>
          <Routes>
              <Route path="/" element={<App/>}>
                  <Route path="/" element={<Page1/>}/>
                  <Route path='page2' element={<Page2/>}/>
              </Route>
          </Routes>
      </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
)

赞(0）回复(0）举报 2023-02-18

我来回答

reactjs 在Outlet中显示默认组件

2条答案

相关问题

热门标签

最新问答