reactjs - 到达路由器的问题嵌套路由
问题描述
我在到达路由器嵌套路由时遇到问题,我正在尝试导航到 / 并呈现 page2,但是当路由更改为 // 时,我被困在同一页面的“/”主页上
<Appjs>
import React from "react";
import "./App.css";
import Homepage from "./Components/Homepage";
import Details from "./Components/Details";
function App() {
return (
<div>
<Router>
<Homepage path="/">
<Details path="details" />
</Homepage>
</Router>
</div>
);
}
export default App;
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;
在路由器内部构建路由时我是否遗漏了什么,请帮助我
因此,在主页中,如果我单击任何链接,路线将更改为 /details 但详细信息页面无法呈现
https://codesandbox.io/s/billowing-hill-j5gmy?file=/src/Homepage.js
解决方案
推荐阅读
- c++ - C++ 打印包含数据结构的数组
- c# - Xamarin Forms - 如何在 ListView 中显示 JSON 数组?
- php - 无法连接到我的数据库并通过 PHP 脚本插入信息
- android - 具有多个片段/视图的 DialogFragment
- android - 将 FLAC 或 AMR_WB 中的音频流式传输到 Google Speech API
- java - 如何解决 Java 中的 NullPointerException?
- python - Makefile 发现错误的 python 安装(python 2 而不是 python 3)
- ckeditor - ckeditor4 源代码总是添加额外的 html 类和元素
- mysql - 执行游标 pymysql 时加载 %s 变量时出错
- javascript - 如何在 HTML DOM 中的父元素上为 2 个子元素分离 2 个事件