tepki bileşeni yönlendirici-dom useParams ()

URL parametresi (id) kapmak ve daha fazla bileşeni doldurmak için kullanmak gerekir bir tepki-yönlendirici-dom yol dayalı bir ayrıntılar görünümü yüklemeye çalışıyorum.

Rotayı benziyor /task/:idve bileşenim URL'den şu şekilde kapılmaya çalışana kadar bileşenim iyi yükleniyor:

    import React from "react";
    import { useParams } from "react-router-dom";

    class TaskDetail extends React.Component {
        componentDidMount() {
            let { id } = useParams();
            this.fetchData(id);
        }

        fetchData = id => {
            // ...
        };

        render() {
            return <div>Yo</div>;
        }
    }

export default TaskDetail;

Bu aşağıdaki hatayı tetikler ve nasıl useParams () doğru uygulanacağından emin değilim.

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

Dokümanlar yalnızca işlevsel bileşenlere dayalı örnekler gösterir, sınıf temelli değil.

Yardımın için teşekkürler, tepki göstereceğim için yeniyim.

Bunu withRouterbaşarmak için kullanabilirsiniz . Dışa aktarılan sınıflanmış bileşeninizi içine sarın withRouterve sonra kullanmak this.props.match.params.idyerine parametreleri almak için kullanabilirsiniz useParams(). Ayrıca herhangi alabilirsiniz location, matchya da historykullanarak bilgi withRouter. Hepsi altından geçiyorthis.props

Örneğinizi kullanmak şöyle görünecektir:

    import React from "react";
    import { withRouter } from "react-router-dom";

    class TaskDetail extends React.Component {
        componentDidMount() {
            const id = this.props.match.params.id;
            this.fetchData(id);
        }

        fetchData = id => {
            // ...
        };

        render() {
            return <div>Yo</div>;
        }
    }

export default withRouter(TaskDetail);

Bu kadar basit!

Parametreler, eşleşme nesnesindeki desteklerden geçirilir.

props.match.params.yourParams

Kaynak: https://redux.js.org/advanced/usage-with-react-router

Aşağıda, argümanlardaki sahne parçalarını tahrip eden dokümanlardan bir örnek verilmiştir.

const App = ({ match: { params } }) => {
  return (
    <div>
      <AddTodo />
      <VisibleTodoList filter={params.filter || 'SHOW_ALL'} />
      <Footer />
    </div>
  )
}

Kancalar sınıf tabanlı bileşenlerle çalışmadığından, onu bir fonksiyona sarıp özellikleri taşıyabilirsiniz:

class TaskDetail extends React.Component {
    componentDidMount() {
        const { id } = this.props.params;
        // ...
    }
}

export default (props) => (
    <TaskDetail
        {...props}
        params={useParams()}
    />
);

Ancak, @ michael-mayo'un dediği gibi withRouter, zaten performans gösteren şey budur.

Bir React.Component öğesinden "useParams ()" gibi bir çağrıyı çağıramazsınız.

Kancaları kullanmak ve var olan bir tepki. bileşenine sahip olmak istiyorsanız en kolay yol bir işlev oluşturmaktır ve o işlevden React.Component öğesini çağırıp parametreyi iletmektir.

import React from 'react';
import useParams from "react-router-dom";

import TaskDetail from './TaskDetail';

function GetId() {

    const { id } = useParams();
    console.log(id);

    return (
        <div>
            <TaskDetail taskId={id} />
        </div>
    );
}

export default GetId;

Geçiş rotanız yine de böyle bir şey olacak

<Switch>
  <Route path="/task/:id" component={GetId} />
</Switch>

o zaman tepki bileşeninizdeki desteklerden kimliği alabilirsiniz

this.props.taskId

Böyle bir şey dene

import React from "react";
import { useParams } from "react-router-dom";

class TaskDetail extends React.Component {
let { id='' } = useParams();
    componentDidMount() {
        this.fetchData(id);
    }

    fetchData = id => {
        // ...
    };

    render() {
        return <div>Yo</div>;
    }
}

export default TaskDetail;

Tepki yönlendirici 5.1 ile aşağıdakileri elde edebilirsiniz:

<Switch>
  <Route path="/item/:id" component={Portfolio}>
    <TaskDetail />
  </Route>
</Switch>

ve bileşeniniz kimliğe erişebiliyor:

import React from 'react';
import { useParams} from 'react-router-dom';

const TaskDetail = () => {
  const {id} = useParams();
    return (
      <div>
        Yo {id}
      </div>
    );
};