I'm having some difficulty with react routing and having trouble comprehending composed routes. I've attempted some code, but unfortunately, it's not functioning as expected. The "/" path works perfectly fine, however, when I attempt to access "/child", it doesn't seem to work. I believe there might be an issue with the wrapper route <Route element={<Wrapper/>} />.

我在反应路线和理解合成路线方面遇到了一些困难。我尝试了一些代码，但不幸的是，它不能像预期的那样工作。“/”路径运行得很好，但是，当我尝试访问“/Child”时，它似乎不起作用。我认为包装器路由 }/>可能有问题。

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter, Routes, Route } from 'react-router-dom'

function Home() {
  return <h1>its home</h1>
}

function Child() {
  return <h1>its child</h1>
}

function Wrapper() {
  return( 
    <div>
      <h1>trial</h1>
      <Route path="/child" element={<Child />} />
    </div>
  )
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route element={<Wrapper />} />
      </Routes>
    </BrowserRouter>
  )
}

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

The Problem

• You have defined your /child path in the wrong place


• You have placed it inside your Wrapper component

Simple Solution

• This solution just fixes the immediate problem


• The paths should be defined within the <BrowserRouter> <Routes>


• See the two commented lines from your example on where to make the changes

import React from 'react';
import ReactDOM from 'react-dom/client';
import {BrowserRouter, Routes, Route} from 'react-router-dom'


function Home(){
    return <h1>its home</h1>
}

function Child(){
    return <h1>its child</h1>
}

function Wrapper(){
    return( 
    <div>
     <h1>trial</h1>
     <Child/> // Use Child component here
    </div>
    )
}

function App(){
    return (
        <BrowserRouter>
            <Routes>
                <Route path= "/home" element={<Home/>} />
                <Route path= "/child" element={<Wrapper/>}  /> //Path here
            </Routes>
        </BrowserRouter>
    )
}

Further Reading

• As you say you are still a beginner I'd recommend react router tutorial. It will really help your understanding of the router


• In particular see the Nested Routes section. I believe this is what you are trying to acheive with the "wrapper"?

Further Solution

• Live version of solution codesandbox


• This solution will make more sense once you have read through the tutorial above.


• Use react-router Outlet in your wrapper so you can then use the Wrapper across multiple components

import React from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";

function Home() {
  return <h1>Home</h1>;
}

function Child() {
  return <h2>its child</h2>;
}

function Wrapper() {
  return (
    <div>
      <h1>Wrapper</h1>
      <Outlet />
    </div>
  );
}

const router = createBrowserRouter([
  {
    path: "/home",
    element: <Home />
  },
  {
    path: "/",
    element: <Wrapper />,
    children: [
      {
        path: "child",
        element: <Child />
      }
    ]
  }
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

It's unclear what exactly you are meaning when you say "composed routes", but React-Router basically has two types of routes.

不清楚您所说的“组合路由”到底是什么意思，但Reaction-Router基本上有两种类型的路由。

• Nested Routes: Route components directly rendering other (e.g nested) Route components.

  嵌套管线：管线组件直接呈现其他(例如嵌套的)管线组件。

  
  

  const FooLayout = () => {
    return (
      ...
      <Outlet />
      ...
    );
  };
  

  
  

  <Route path="foo" element={<FooLayout />}>
    <Route index element={<Foo />} />         // <-- rendered into Outlet
    <Route path="bar" element={<FooBar />} /> // <-- rendered into Outlet
  </Route>
  

  
  



• Descendent Routes: Routed components rendering another set of Routes and Route components.

  后代布线：渲染另一组布线和布线组件的布线组件。

  
  

  const FooWrapper = () => {
    return (
      ...
      <Routes>
        <Route path="/" element={<Foo />} />       // <-- descendent route
        <Route path="/bar" element={<FooBar />} /> // <-- descendent route
      </Routes>
      ...
    );
  };
  

  
  

  <Route path="foo/*" element={<FooWrapper />} /> // <-- renders descendents
  

  
  

Armed with this knowledge now you have a couple basic ways to render the Child component on the "/child" path where it's accessible/renderable.

有了这些知识，现在您就有了几种基本的方法来在可访问/可渲染的“/Child”路径上渲染子组件。

function Wrapper() {
  return( 
    <div>
      <h1>trial</h1>
      <Routes>
        <Route path="/child" element={<Child />} />
      </Routes>
    </div>
  );
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route path="/*" element={<Wrapper />} />
      </Routes>
    </BrowserRouter>
  );
}

or

或

function Wrapper() {
  return( 
    <div>
      <h1>trial</h1>
      <Outlet />
    </div>
  );
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route element={<Wrapper />}>
          <Route path="/child" element={<Child />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

For more details see Layout Routes and Outlets, and Splats.

有关更多详细信息，请参阅布局路线和奥特莱斯以及Splats。