Блог

Главная - Вопросы по программированию - Ссылка ReactJS не может перейти к соответствующему компоненту

Ссылка ReactJS не может перейти к соответствующему компоненту

#javascript #reactjs #react-router #react-router-dom

#JavaScript #reactjs #реагировать-маршрутизатор #react-router-dom

Вопрос:

Я использую « 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

Комментарии:

1. Где AllSuppliers отображается по отношению к вашему основному Router ?

2. AllSuppliers отображается непосредственно из App.js

Ответ №1:

Проблема

При отображении каждой ссылки вы переводите каждую ссылку в свой собственный 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 из них будет использовать контекст маршрутизации ближайшего Router над ним в ReactTree, поэтому вы увидите изменение 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>
  );
}

Комментарии:

1. Не могли бы вы взглянуть на Edit1 , где я удалил маршрутизатор из каждой ссылки и разместил его снаружи. Но я наблюдаю такое же поведение.

2. @CSharper Router перенос App или AllSuppliers был бы правильным. Вы удалили все Router компоненты, обертывающие каждый Link из них? Вам действительно нужен только один Router для всего приложения.

3. Да, я удалил. В Edit2 я вставил измененные AllSuppliers.js

4. @CSharper где ваш основной Router , где определены ваши Route компоненты? Если у вас нет маршрутов, то никакое количество Link s не заставит что-либо еще отображать.

Ответ №2:

Прежде всего, вы должны настроить 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