javascript 如何使用路由器代替交换机？[duplicate]

sqxo8psd 于 2022-12-17 发布在 Java

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

此问题在此处已有答案：

React Route render blank page（1个答案）
8分钟前就关门了。
我是相当新的路由和遵循教程，但似乎不能让事情的工作。
这是我正在学习的教程（26：45 - 29：00）：https://www.youtube.com/watch?v=ntYXj9W1Ez8&t=1720s
我有一个文件：

const Routes = () => {
    return (
        <Switch>
            <Route
                path='/:category/search/:keyword'
                component={Catalog}
            />
            <Route
                path='/:category/:id'
                component={Detail}
            />
            <Route
                path='/:category'
                component={Catalog}
            />
            <Route
                path='/'
                exact
                component={Home}
            />
        </Switch>
    );
}

和我的App.js：

<BrowserRouter>
      <Route
        render={(props) => (
          <>
            <Header {...props} />
            <Routes />
            <Footer />
          </>
        )}
      />
    </BrowserRouter>

它应该呈现出文本：页眉、主页、页脚，但不呈现任何内容。
我做了一些搜索，发现开关已经被替换为路由。所以我改变了导入和开关标签路由，但它仍然不工作。

JavaScript

来源：https://stackoverflow.com/questions/74826654/how-do-i-use-routes-instead-of-switch

2条答案

按热度按时间

3ks5zfa01#

在您的index.js或main.js

import App from './App';
...
<BrowserRouter>
   <App />
</BrowserRouter>

在App.js中

return (
<>
 <Header/>
 <Routes>
   <Route path='/' element={<Home />}></Route>
   <Route path='/contact' element={<Contact />}></Route>
   <Route path='/category/:id' element={<Category/>}></Route>
 </Routes>
 <Footer />
</>
)

赞(0）回复(0）举报 2022-12-17

pepwfjgg2#

您可以使用react-router-dom v6.4的新路由方式：

import React from 'react';
import App from './App';
import { createRoot } from 'react-dom/client';
import { createBrowserRouter, RouterProvider, Link } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: (
      <div className="home">
        <div className="navbar">
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
          ...etc
        </div>
        <main className="main">...</main>
      </div>
    ),
  },
  {
    path: '/:category/search/:keyword',
    element: <Catalog />,
  },
  {
    path: '/:category/:id',
    element: <Detail />,
  },
  {
    path: '/:category',
    element: <Catalog />,
  },
  {
    path: '/',
    element: <Home />,
  },
]);

createRoot(document.getElementById('root')).render(
  <RouterProvider router={router}>
    <App />
  </RouterProvider>
);

赞(0）回复(0）举报 2022-12-17

我来回答

javascript 如何使用路由器代替交换机？[duplicate]

2条答案

相关问题

热门标签

最新问答