无法链接 react js 中的组件

如何解决无法链接 react js 中的组件

我是反应的新手，这是我的第一个应用程序。

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

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

你能帮我吗。

提前致谢。Same view when I click on view details button

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;

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)]}
        />
      ))
    };  
  );        
}

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>
    );
}

ContactDetail.js

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

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

解决方法

这是工作代码。希望它对您有所帮助，您错过了 exact 中的 router 个单词，该单词首先与 exact route 匹配。

app.js

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: "[e-mail]",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>
  );
}

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>
  );
}

ContactsList.js

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)]}
    />
  ));
}

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,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>
  );
}

https://codesandbox.io/s/hardcore-glade-8h7jc