Javascript 无法链接react js中的组件

我是新手，这是我的第一次申请

我编写了一个代码来获取联系人列表，单击联系人卡上的查看详细信息按钮后，它将打开一个显示联系人详细信息的新页面

但是在我的代码中，当我单击查看详细信息按钮时，一个新页面正在打开，并且具有相同的现有卡片视图。我不知道为什么contactdetails组件没有显示在新页面中

你能帮帮我吗

提前谢谢

app.js

import './App.css';
import React from 'react';
import ContactsList from './components/ContactList.js';        
        
function App() {
  return (
    <React.Fragment>
      <ContactsList></ContactsList>
    </React.Fragment>
  );
}
        
export default App;

import React, { useState } from "react";
import { Route, BrowserRouter, Switch } from "react-router-dom";
import ContactsList from "./ContactsList";
import ContactDetail from "./ContactDetail";

export default function App() {
  const [contacts, setContacts] = useState({
    cname: "John Doe",
    email: "johndoe@email.com",
    image: "https://www.computerhope.com/banners/banner.gif"
  });

  return (
    <BrowserRouter>
      <React.StrictMode>
        <Switch>
          <Route exact path="/">
            <ContactsList />
          </Route>
          <Route path="/ContactDetail">
            <ContactDetail {...contacts} />
          </Route>
        </Switch>
      </React.StrictMode>
    </BrowserRouter>
  );
}

import'/App.css'；
从“React”导入React；
从“/components/ContactList.js”导入ContactsList；
函数App（）{
返回(
);
}
导出默认应用程序；

ContactsList.js

import React, { Fragment } from 'react';
import Contact from './Contact';    

export default function ContactsList() {
  var images = [],
  index = 0;
  images[0] = 'https://www.computerhope.com/banners/banner.gif';
  images[1] = 'https://www.computerhope.com/banners/banner2.gif';
  images[2] = 'https://www.computerhope.com/banners/banner3.gif';
  index = Math.floor(Math.random() * images.length);
    
  const[contacts, setContacts] = React.useState([]);
    
  React.useEffect(function effectFunction(){
    fetch('https://jsonplaceholder.typicode.com/users')
    .then(response => response.json())
    .then(data => {
      console.log((data));
      setContacts(data);
    });
  },[]);
  return(   
    {contacts.map(item => (
      <Contact
          key={item.id}
          name={item.name}
          email={item.email}
          image = {images[Math.floor(Math.random() * images.length)]}
        />
      ))
    };  
  );        
}

import React, { useEffect, useState } from "react";
import Contact from "./Contact";

export default function ContactsList() {
  var images = [],
    index = 0;
  images[0] = "https://www.computerhope.com/banners/banner.gif";
  images[1] = "https://www.computerhope.com/banners/banner2.gif";
  images[2] = "https://www.computerhope.com/banners/banner3.gif";
  index = Math.floor(Math.random() * images.length);

  const [contacts, setContacts] = useState([]);
  useEffect(function effectFunction() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
        setContacts(data);
      });
  }, []);
  return contacts.map((user) => (
    <Contact
      key={user.id}
      name={user.name}
      email={user.email}
      image={images[Math.floor(Math.random() * images.length)]}
    />
  ));
}

import React，{Fragment}来自'React'；
从“./Contact”导入联系人；
导出默认函数ContactsList（）{
var images=[]，
指数=0；
图像[0]='https://www.computerhope.com/banners/banner.gif';
图像[1]='https://www.computerhope.com/banners/banner2.gif';
图像[2]='https://www.computerhope.com/banners/banner3.gif';
index=Math.floor（Math.random（）*images.length）；
const[contacts，setContacts]=React.useState（[]）；
React.useffect（函数effectFunction（）{
取（'https://jsonplaceholder.typicode.com/users')
.then（response=>response.json（））
。然后（数据=>{
console.log（（数据））；
设置联系人（数据）；
});
},[]);
报税表（
{contacts.map（项=>(
))
};  
);        
}

Contact.js

import React, { Fragment } from 'react';
import { Card , Button,} from 'react-bootstrap';
import ContactDetail  from './ContactDetail';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
    BrowserRouter
} from "react-router-dom";
     
export default function Contact({key, name, email, image}) {
    return (
        <Card key = {key}>
            <Card.Img src = {image} alt = "Loading"></Card.Img>
            <Card.Body>
                <Card.Title> {name} </Card.Title>
                <Card.Text>Contact: {email} </Card.Text>
                <BrowserRouter>
                <Link to = {{pathname: '/ContactDetail', query:{cname :{name}, email : {email} , image: {image}}  }} className="btn btn-primary" target="_blank">
                    View Details
                </Link>
                <Route
                    path="/ContactDetail"
                    component={ContactDetail} 
                />
                </BrowserRouter>
            </Card.Body>
        </Card>
    );
}

import React，{Fragment}来自'React'；
从“react bootstrap”导入{Card，Button，}；
从“/ContactDetail”导入ContactDetail；
进口{
BrowserRouter作为路由器，
转换
路线,，
链接
浏览器路由器
}从“反应路由器dom”；
导出默认功能联系人（{key，name，email，image}）{
返回(
{name}
联系人：{email}
查看详细信息
);
}

ContactDetail.js

import React, { Fragment } from 'react';
import { Image } from 'react-bootstrap';

export default function ContactDetail({cname, email, image}) {
    return(
        <Fragment>
            <Image src ={image} rounded></Image>
            <h1> {cname} </h1>
        </Fragment>
    );
}

import React, { Fragment } from "react";
import { Image } from "react-bootstrap";

export default function ContactDetail({ cname, email, image }) {
  return (
    <Fragment>
      <Image src={image} rounded></Image>
      <h1> {cname} </h1>
    </Fragment>
  );
}

import React，{Fragment}来自'React'；
从“react bootstrap”导入{Image}；
导出默认函数ContactDetail（{cname，email，image}）{
返回(
{cname}
);
}

这是工作代码。希望它能帮助你，你错过了

路由器

中与

精确

路由匹配的

精确

单词

app.js

import './App.css';
import React from 'react';
import ContactsList from './components/ContactList.js';        
        
function App() {
  return (
    <React.Fragment>
      <ContactsList></ContactsList>
    </React.Fragment>
  );
}
        
export default App;

import React, { useState } from "react";
import { Route, BrowserRouter, Switch } from "react-router-dom";
import ContactsList from "./ContactsList";
import ContactDetail from "./ContactDetail";

export default function App() {
  const [contacts, setContacts] = useState({
    cname: "John Doe",
    email: "johndoe@email.com",
    image: "https://www.computerhope.com/banners/banner.gif"
  });

  return (
    <BrowserRouter>
      <React.StrictMode>
        <Switch>
          <Route exact path="/">
            <ContactsList />
          </Route>
          <Route path="/ContactDetail">
            <ContactDetail {...contacts} />
          </Route>
        </Switch>
      </React.StrictMode>
    </BrowserRouter>
  );
}

import React，{useState}来自“React”；
从“react router dom”导入{Route，BrowserRouter，Switch}；
从“/ContactsList”导入ContactsList；
从“/ContactDetail”导入ContactDetail；
导出默认函数App（）{
const[contacts，setContacts]=useState({
cname：“约翰·多伊”，
电子邮件：“johndoe@email.com",
图像：“https://www.computerhope.com/banners/banner.gif"
});
返回(
);
}

ContactDetail.js

import React, { Fragment } from 'react';
import { Image } from 'react-bootstrap';

export default function ContactDetail({cname, email, image}) {
    return(
        <Fragment>
            <Image src ={image} rounded></Image>
            <h1> {cname} </h1>
        </Fragment>
    );
}

import React, { Fragment } from "react";
import { Image } from "react-bootstrap";

export default function ContactDetail({ cname, email, image }) {
  return (
    <Fragment>
      <Image src={image} rounded></Image>
      <h1> {cname} </h1>
    </Fragment>
  );
}

import React，{Fragment}来自“React”；
从“react bootstrap”导入{Image}；
导出默认函数ContactDetail（{cname，email，image}）{
返回(
{cname}
);
}

ContactsList.js

import React, { Fragment } from 'react';
import Contact from './Contact';    

export default function ContactsList() {
  var images = [],
  index = 0;
  images[0] = 'https://www.computerhope.com/banners/banner.gif';
  images[1] = 'https://www.computerhope.com/banners/banner2.gif';
  images[2] = 'https://www.computerhope.com/banners/banner3.gif';
  index = Math.floor(Math.random() * images.length);
    
  const[contacts, setContacts] = React.useState([]);
    
  React.useEffect(function effectFunction(){
    fetch('https://jsonplaceholder.typicode.com/users')
    .then(response => response.json())
    .then(data => {
      console.log((data));
      setContacts(data);
    });
  },[]);
  return(   
    {contacts.map(item => (
      <Contact
          key={item.id}
          name={item.name}
          email={item.email}
          image = {images[Math.floor(Math.random() * images.length)]}
        />
      ))
    };  
  );        
}

import React, { useEffect, useState } from "react";
import Contact from "./Contact";

export default function ContactsList() {
  var images = [],
    index = 0;
  images[0] = "https://www.computerhope.com/banners/banner.gif";
  images[1] = "https://www.computerhope.com/banners/banner2.gif";
  images[2] = "https://www.computerhope.com/banners/banner3.gif";
  index = Math.floor(Math.random() * images.length);

  const [contacts, setContacts] = useState([]);
  useEffect(function effectFunction() {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
        setContacts(data);
      });
  }, []);
  return contacts.map((user) => (
    <Contact
      key={user.id}
      name={user.name}
      email={user.email}
      image={images[Math.floor(Math.random() * images.length)]}
    />
  ));
}

import React，{useffect，useState}来自“React”；
从“/Contact”导入联系人；
导出默认函数ContactsList（）{
var images=[]，
指数=0；
图像[0]=”https://www.computerhope.com/banners/banner.gif";
图像[1]=”https://www.computerhope.com/banners/banner2.gif";
图像[2]=”https://www.computerhope.com/banners/banner3.gif";
index=Math.floor（Math.random（）*images.length）；
const[contacts，setContacts]=useState（[]）；
useffect（函数effectFunction（）{
取回（“https://jsonplaceholder.typicode.com/users")
.then（（response）=>response.json（））
。然后（（数据）=>{
控制台日志（数据）；
设置联系人（数据）；
});
}, []);
返回联系人。映射（（用户）=>(
));
}

Contacts.js

import React from "react";
import { Card } from "react-bootstrap";
// import ContactDetail from "./ContactDetail";
import { Link } from "react-router-dom";

export default function Contact({ key, name, email, image }) {

  return (
    <Card key={key}>
      <Card.Img src={image} alt="Loading"></Card.Img>
      <Card.Body>
        <Card.Title> {name} </Card.Title>
        <Card.Text>Contact: {email} </Card.Text>
        <Link
          to={{
            pathname: "/ContactDetail",
            query: { cname: { name }, email: { email }, image: { image } }
          }}
          className="btn btn-primary"
        >
          View Details
        </Link>
        {/* <Route path="/ContactDetail" component={ContactDetail} /> */}
      </Card.Body>
    </Card>
  );
}

从“React”导入React；
从“react bootstrap”导入{Card}；
//从“/ContactDetail”导入ContactDetail；
从“react router dom”导入{Link}；
导出默认功能联系人（{key，name，email，image}）{
返回(
{name}
联系人：{email}
查看详细信息
{/*  */}
);
}

---

您应该在根级别包装所有路由，这是

组件。另外，将您的代码放在codesandbox上，这样我们就可以确切地看到您面临的问题。谢谢，这很有帮助，但我正在获取静态联系人详细信息，您能否帮助我仅获取特定联系人的详细信息，我正在从Contacts.js文件中link tag中的query参数发送该联系人