Bagaimana untuk Melaksanakan Penghalaan Bersarang dalam Penghala Reaksi v4/v5?

Penghalaan Bersarang dengan Penghala React v4/v5

Penghala Bersarang menyediakan mekanisme yang berkuasa untuk mencipta laluan bersarang dalam aplikasi React anda. Ini membolehkan anda memodulasi laluan anda dan mencipta struktur navigasi yang kompleks.

Untuk mencipta laluan bersarang dalam React Router v4, anda akan menentukan laluan induk dan menentukan laluan anak di dalamnya. Contohnya, untuk mengasingkan apl anda kepada bahagian hadapan dan pentadbir:

<code class="jsx"><Match pattern="/" component={Frontpage}>
  <Match pattern="/home" component={HomePage} />
  <Match pattern="/about" component={AboutPage} />
</Match>
<Match pattern="/admin" component={Backend}>
  <Match pattern="/home" component={Dashboard} />
  <Match pattern="/users" component={UserPage} />
</Match>
<Miss component={NotFoundPage} /></code>

Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa dalam React Router v4, laluan tidak bersarang dalam laluan lain. Sebaliknya, laluan kanak-kanak diletakkan di dalam komponen induk. Oleh itu, kod di atas akan ditukar kepada:

<code class="jsx"><Route path="/" component={Frontpage} /></code>

Dengan komponen induk ini:

<code class="jsx">const Frontpage = ({ match }) => (
  <div>
    <h2>Frontend</h2>
    <Link to={`${match.url}/home`}>Home</Link>
    <Link to={`${match.url}/about`}>About</Link>
    <Route path={`${match.path}/home`} component={HomePage} />
    <Route path={`${match.path}/about`} component={AboutPage} />
  </div>
);</code>

Begitu juga, untuk bahagian pentadbir:

<code class="jsx"><Route path="/admin" component={Backend} /></code>

Dengan komponen induk ini:

<code class="jsx">const Backend = ({ match }) => (
  <div>
    <h2>Admin</h2>
    <Link to={`${match.url}/home`}>Dashboard</Link>
    <Link to={`${match.url}/users`}>Users</Link>
    <Route path={`${match.path}/home`} component={Dashboard} />
    <Route path={`${match.path}/users`} component={UserPage} />
  </div>
);</code>

Pendekatan ini membolehkan anda mencipta komponen modular dan boleh guna semula yang merangkumi kedua-dua takrif laluan dan pemaparan UI untuk bahagian aplikasi anda yang berbeza.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Penghalaan Bersarang dalam Penghala Reaksi v4/v5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!