‹Link› dari react-router-dom tidak mengubah URL

Saat ini saya sedang dalam proses membuat situs web, dan menemui hambatan dalam hal ini. Saya menggunakan react-router-dom untuk merutekan aplikasi saya, dan agak baru dalam hal itu, tetapi dalam satu halaman, tautan yang saya letakkan di halaman tersebut tidak mengubah URL

Saya sudah mencoba pada komponen sebelumnya, dimana saya meletakkan tombol pada satu komponen, kemudian menggunakan Link untuk memuat komponen lain berdasarkan Link dan Rute yang diberikan. Namun, yang satu ini, meski menggunakan struktur serupa seperti sebelumnya, tidak berfungsi sama sekali

Ini adalah kode untuk halaman yang dimuat. Saya sudah mengimpor BrowserRouter sebagai Tautan dari react-router-dom

<div>
  <p>TEST</p>
   <Link to="/leadslist"><button class="btn btn-success">Back to Leads List</button></Link>
</div>

Ini adalah halaman target

            <div>
            <Router>
                <Switch>
                    <Redirect from="/leads" to="/leadslist" />
                    <Route path="/leadsForm" component={LeadsForm} />
                    <Route path="/leadslist" component={LeadsList} />
                    <Route path="/leaddetails" component={LeadsDetails}/>
                 </Switch>
            </Router>
            </div>

percobaan saya sebelumnya mengklik tombol dari "/leadslist" ke "/leadsForm" benar-benar berhasil, tetapi kemudian saya mencoba memuat ke "leaddetails" untuk mencoba kembali ke "/leadslist", tetapi tidak mengubah URL sama sekali. Bantuan apa pun akan sangat dihargai.


reactjs javascript react-router
person Surya Putra    schedule 06.08.2019    source sumber

Jawaban (2)


arrow_upward
4
arrow_downward

Anda tidak boleh mengimpor BrowserRoute sebagai Link dari react-router-dom. Keduanya adalah hal yang berbeda. Anda perlu mengimpor Link langsung dari react-router-dom. Selebihnya, itu harus bekerja dengan baik.

Anda harus mengimpor link dengan cara ini:

import { Link } from "react-router-dom";

Sekarang, saya tidak yakin apa yang sebenarnya terjadi pada aplikasi Anda. Namun di sini, saya telah membuat demo yang sangat mendasar atau reaksi yang berfungsi router menggunakan CodeSandBox. Anda dapat melihatnya, ini akan membantu Anda memperbaiki masalah yang Anda alami.

Anda juga dapat membaca artikel< ini /a> untuk lebih memahami cara kerja router reaksi.

person Saqib    schedule 06.08.2019
comment
Wah terima kasih, langsung berhasil. Kalau boleh tahu, apa bedanya menggunakan yang memiliki {BrowserRouter as Router, Route, Link} dan yang langsung seperti {Link} dll.? - person Surya Putra; 06.08.2019
comment
{BrowserRouter as Router, Route, Link} mengimpor tiga hal, Router, Route, and Link. Sedangkan {Link} hanya mengimpor tautan. Mungkin kesalahan yang Anda lakukan adalah mengimpor BrowserRouter as Link yang artinya BrowserRouter dinamai Link. Kemudian Anda menggunakan Link (BrowserRouter) untuk mengarahkan ke rute itu. Sebaliknya, Anda hanya memerlukan Link saja. Anda dapat membaca lebih lanjut di artikel yang saya tautkan di jawabannya. - person Saqib; 06.08.2019

arrow_upward
1
arrow_downward

Kode Anda tidak berfungsi karena Anda telah menambahkan tombol di dalam tag Tautan sehingga ketika tombol diklik, React hanya mengaktifkan metode tombol onClick dan Tautan tidak akan diklik!

Jadi solusinya, Anda dapat menghapus tombol dari tag Tautan

<Link to="/leadslist">Back to Leads List</Link>

atau Anda dapat menggunakan solusi Di Bawah Ini,

Daripada menambahkan tombol di Tautan Anda harus melakukan ini,

import withRouter from 'react-router-dom'   
const Component = (props) => {
    <div>
        <Button onClick={()=>props.history.push('/leadslist')}
    </div>
  }
export default withRouter(Component)

Tambahkan HOC withRouter ke komponen Anda dan Anda bisa mendapatkan objek histori di prop.

person Sangam Rajpara    schedule 06.08.2019