时间戳

首页 > 解决方案 > ReactJs链接无法导航到相应的组件

javascript - ReactJs链接无法导航到相应的组件

问题描述

我Link在我的组件中使用“”来导航并将相应的数据通过道具传递给其他组件。我有以下主要组件，因为AllSuppliers它使用链接导航到EditSupplier组件。

import React,{useEffect,useState} from 'react'
import axios from 'axios';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { EditSupplier } from "./EditSupplier";
function AllSuppliers() {
    const [suppliers, setstate] = useState([])   
    useEffect(() => {        
        axios.get('http://localhost:62815/api/values/GetAllSuppliers')
            .then(x => {                
                setstate(x.data)            
            }
            )
            .catch(error => {
                alert(error);                
            });;
    },[]);
    return (
        <>
            <table style={{width: '50%'}}>
            <thead>
                <tr>
                <th>
                    Supplier Id
                </th>
                <th>
                    Supplier Name
                </th>
                <th>
                    Edit
                </th>
                </tr>
                </thead>
                
                {                    
                    suppliers.map((supplier)=> {
                        return <tr>
                            <td>
                            {supplier.sup_Id}
                            </td>
                            <td>
                            {supplier.sup_ShortCode}
                            </td>
                            <td>
                            <Router>
                                <Link to={{ pathname: '/EditSupplier', supplierProps: { name: 'bar'} }}>Edit</Link>
                                </Router>
                            </td>

                        </tr>
                    })
                }
               
            </table>
        </>
    )
}

export default AllSuppliers

单击 Edit Link 时，组件未导航。只是浏览器网址正在更改。

在此处输入图像描述

如图所示，只有浏览器 url 被更改，但看不到来自EditSuppliers. 图像中的内容来自AllSuppliers组件。可能是什么原因？

编辑1：-

我试图用 App.js 中的路由器将我的应用程序包装为 -

import './App.css';
import AllSuppliers from './Components/AllSuppliers'
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
function App() {
  return (
    <div className="App">
      <Router>
      <AllSuppliers></AllSuppliers>
      </Router>
    </div>
  );
}

export default App;

我观察到了同样的行为。

我也尝试将路由器包裹在里面AllSuppliers- 之前和之后<table> </table>

在这种情况下，我也观察到了同样的行为。

编辑2：-

AllSuppliers.Js



import React,{useEffect,useState} from 'react'
import axios from 'axios';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { EditSupplier } from "./EditSupplier";
function AllSuppliers() {
    const [suppliers, setstate] = useState([])   
    useEffect(() => {        
        axios.get('http://localhost:62815/api/values/GetAllSuppliers')
            .then(x => {                
                setstate(x.data)            
            }
            )
            .catch(error => {
                alert(error);                
            });;
    },[]);
    return (
        <>
     
            <table style={{width: '50%'}}>
            <thead>
                <tr>
                <th>
                    Supplier Id
                </th>
                <th>
                    Supplier Name
                </th>
                <th>
                    Edit
                </th>
                </tr>
                </thead>
                
                {                    
                    suppliers.map((supplier)=> {
                        return <tr>
                            <td>
                            {supplier.sup_Id}
                            </td>
                            <td>
                            {supplier.sup_ShortCode}
                            </td>
                            <td>                            
                                <Link to={{ pathname: '/EditSupplier', supplierProps: { name: 'bar'} }}>Edit</Link>                         
                            </td>
                        </tr>
                    })
                }
               
            </table>
           
        </>
    )
}

export default AllSuppliers

标签： javascriptreactjsreact-routerreact-router-dom

解决方案

问题

映射Router每个supplier.

suppliers.map((supplier)=> {
  return (
    <tr>
      <td>{supplier.sup_Id}</td>
      <td>{supplier.sup_ShortCode}</td>
      <td>
        <Router> // <-- router context
          <Link
            to={{
              pathname: '/EditSupplier',
              supplierProps: {
                name: 'bar',
              },
            }}
          >
            Edit
          </Link>
        </Router>
      </td>
    </tr>
  );
})

这里的问题是，每个都Link将使用 ReactTree 中最靠近它的路由上下文Router，因此您将在地址栏中看到 URL 更改，但Router处理所有应用程序的路由并没有得到更新。

您的应用程序中似乎还缺少任何类型的实际路由。

function App() {
  return (
    <div className="App">
      <Router>
      <AllSuppliers></AllSuppliers>
      </Router>
    </div>
  );
}

解决方案

移除多余的Router组件。只需确保至少有一个Router包装您的应用程序以提供路由上下文。

suppliers.map((supplier)=> {
  return (
    <tr>
      <td>{supplier.sup_Id}</td>
      <td>{supplier.sup_ShortCode}</td>
      <td>
        <Link
          to={{
            pathname: '/EditSupplier',
            supplierProps: {
              name: 'bar',
            },
          }}
        >
          Edit
        </Link>
      </td>
    </tr>
  );
})

定义应用程序要呈现的路由。

function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route path="/EditSupplier" component={EditSupplier} />
          <Route path="/" component={AllSuppliers} />
        </Switch>
      </Router>
    </div>
  );
}

推荐阅读