Проблемы с маршрутизатором Reach. Вложенные маршруты

Question

• 1000 1003 *

import React, { Component, useEffect, useState } from "react";
import styled, { isStyledComponent } from "styled-components";
import NavLink from "./NavLink";
import { Link } from "@reach/router";

const Homepage = () => {
const [users, setUsers] = useState([]);

  return (
    <React.Fragment>
      <div className={"container"}>
        <Styleddiv>
          <h2>Select an Account</h2>
          <div style={{ padding: 0 }}>
            {Object.values(users).map((item) => (
              <Link to={`details/${item.name}`}>
                <img src={item.profilepicture} alt="Girl in a jacket"></img>
                <span>{item.name}</span>
              </Link>
            ))}
          </div>
        </Styleddiv>
      </div>
    </React.Fragment>
  );
};

export default Homepage;

Я что-то упустил при структурировании маршрутов внутри маршрутизатора, пожалуйста, помогите мне

Итак, на домашней странице Если я нажму на любую ссылку, маршрут изменится на / детали, но детали страница не отображается

https://codesandbox.io/s/billowing-hill-j5gmy?file= / src / Homepage. js

Answer 1

Вот как я использую вложенные маршруты

Песочница кода

Для вложения маршрутов вам необходимо поместить их в дочерний компонент маршрута.

Опора render используется вместо component, потому что она предотвращает перемонтирование встроенного функционального компонента при каждом рендеринге, см. Объяснение .

Объект соответствия содержит информацию о том, как маршрут соответствует URL-адресу, поэтому мы можем иметь вложенный маршрут, используя свойство url, которое дает нам согласованную часть URL-адреса, см. объяснение .

Answer 2

Вы пропустили импорт Router в свой App.js файл?

import React from "react";
import { Router, Link } from "@reach/router";

import Homepage from "./Homepage";
import Details from "./Details";

export default function App() {
  return (
    <div>
      <nav>
        <Link to="/">Home</Link>
        <Link to="dashboard">Detail</Link>
      </nav>
      <Router>
        <Homepage path="/" />
        <Details path="dashboard" />
      </Router>
    </div>
  );
}

Изменить: Code Sandbox