コンポーネントで「」を使用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

[リンクの編集]をクリックすると、コンポーネントがナビゲートされません。ブラウザのURLだけが変更されています。

ここに画像の説明を入力してください

画像に見られるように、ブラウザの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
応答

問題

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

ここでの問題は、それぞれがReactTreeでその上にLink最も近いルーティングコンテキストを使用するため、アドレスバーにURLの変更が表示されますが、アプリケーションのすべてのルートの処理が更新されないことです。RouterRouter

また、アプリに実際のルーティングが欠落しているようです。

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

解決

余分なRouterコンポーネントを削除します。ルーティングコンテキストを提供するために、アプリをラップしているものが少なくとも1つあることを確認してください。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>
  );
}

まず、で設定する必要がありroutesますapp.jsそうすればあなたのリンクだけが機能します

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

export default App;

あなたのコードで

 <Router>
      <AllSuppliers></AllSuppliers>
      </Router>

単一のコンポーネントをレンダリングしているだけですAllSuppliersルーが変わるときはいつでもあなたは見るだけですAllSuppliers