React Router V6 设置

Question

我正在使用 React.js 开发一个小型电子商务应用程序。 在设置路由器 v6 应用程序时，没有任何渲染。即使在 App.js 或 Index.js 中配置路由器也应该有错误。这是来自 index.js 代码的快照

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

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

reportWebVitals();

应用程序.js

import React from 'react';
import Cart from './pages/Cart';
import Home from './pages/Home';
import ProductDetails from './pages/ProductDetails';
import {
  RouterProvider,
  Route,
  createBrowserRouter,
  createRoutesFromElements,
  Link
} from 'react-router-dom';

const Root = () => {
  return (
    <>
      <Link to="/">Home</Link>
    </>
  );
};

const appRouter = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Root />}>
      <Route path="home" element={<Home />} />
      <Route path="cart" element={<Cart />} />
      <Route path="product-details" element={<ProductDetails />} />
    </Route>
  )
)

function App() {
  return <RouterProvider router={appRouter} />;
}

export default App;

如果我在index.js中缺少任何导入或者App.js中有任何错误，请告诉我。

我尝试了在线资源，尝试导入

createBrowserRouter

等但没有成功。

Answer 1

Root

还应该为嵌套路由渲染一个

Outlet

，以将其

element

内容渲染到其中。

import React from 'react';
import {
  createBrowserRouter,
  createRoutesFromElements,
  RouterProvider,
  Route,
  Link,
  Navigate,
  Outlet, // <--
} from 'react-router-dom';
import Cart from './pages/Cart';
import Home from './pages/Home';
import ProductDetails from './pages/ProductDetails';

const Root = () => {
  return (
    <>
      <Link to="/">Home</Link>
      {/* other common UI, etc */}

      <Outlet />
    </>
  );
};

const appRouter = createBrowserRouter(
  createRoutesFromElements(
    <Route element={<Root />}>
      <Route path="home" element={<Home />} />
      <Route path="cart" element={<Cart />} />
      <Route path="product-details" element={<ProductDetails />} />
      <Route path="*" element={<Navigate to="/home" replace />} />
    </Route>
  )
);

function App() {
  return <RouterProvider router={appRouter} />;
}

export default App;

欲了解更完整的详细信息，请参阅：

• 布局路线
• 奥特莱斯

Answer 2

非常感谢，我相应地修改了App.js，但它没有渲染。然而它仍然没有渲染，也许index.js中缺少一些导入

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

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