‹Link› จาก react-router-dom ไม่เปลี่ยน URL

ขณะนี้ฉันกำลังอยู่ในระหว่างการสร้างเว็บไซต์และประสบปัญหานี้ ฉันกำลังใช้ react-router-dom เพื่อกำหนดเส้นทางแอปของฉัน และค่อนข้างใหม่กับแอปนี้ แต่ในหน้าเดียว ลิงก์ที่ฉันใส่ในหน้านั้นไม่เปลี่ยน URL

ฉันได้ลองใช้ส่วนประกอบก่อนหน้านี้แล้ว โดยฉันวางปุ่มบนส่วนประกอบหนึ่ง จากนั้นใช้ลิงก์เพื่อโหลดส่วนประกอบอื่นตามลิงก์และเส้นทางที่กำหนด อย่างไรก็ตามในเรื่องนี้แม้จะใช้โครงสร้างคล้ายเมื่อก่อน แต่ก็ไม่ได้ผลเลย

นี่คือโค้ดสำหรับหน้าที่โหลด ฉันนำเข้า BrowserRouter เป็นลิงก์จาก react-router-dom แล้ว

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

นี่คือหน้าเป้าหมาย

            <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>

การลองคลิกปุ่มครั้งก่อนของฉันจาก "/leadslist" ถึง "/leadsForm" ใช้งานได้จริง แต่จากนั้นฉันพยายามโหลดไปที่ "leaddetails" เพื่อลองกลับไปที่ "/leadslist" แต่มันไม่เปลี่ยน URL เลย ความช่วยเหลือใด ๆ จะได้รับการชื่นชมอย่างแท้จริง


reactjs javascript react-router
person Surya Putra    schedule 06.08.2019    source แหล่งที่มา

คำตอบ (2)


arrow_upward
4
arrow_downward

คุณไม่ควรนำเข้า BrowserRoute เป็น Link จาก react-router-dom ทั้งสองเป็นสิ่งที่แตกต่างกัน คุณต้องนำเข้า Link โดยตรงจาก react-router-dom พักผ่อน มันควรจะทำงานได้อย่างมั่นคง

คุณควรนำเข้า link ด้วยวิธีนี้:

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

ตอนนี้ฉันไม่แน่ใจว่าแอปของคุณเกิดอะไรขึ้นกันแน่ แต่ที่นี่ ฉันได้สร้างการสาธิตขั้นพื้นฐานหรือการตอบสนองที่ใช้งานได้ เราเตอร์โดยใช้ CodeSandBox คุณสามารถดูได้ มันควรช่วยคุณแก้ไขปัญหาที่คุณประสบได้

นอกจากนี้ คุณยังสามารถอ่านบทความ เพื่อทำความเข้าใจการทำงานของเราเตอร์ตอบสนองเพิ่มเติม

person Saqib    schedule 06.08.2019
comment
ว้าว ขอบคุณ มันใช้งานได้ทันที ถ้าฉันรู้ อะไรจะแตกต่างระหว่างการใช้อันที่มี {BrowserRouter as Router, Route, Link} กับอันที่เหมือนกับ {Link} โดยตรง? - person Surya Putra; 06.08.2019
comment
{BrowserRouter as Router, Route, Link} นำเข้าสามสิ่ง Router, Route, and Link ในขณะที่ {Link} นำเข้าเฉพาะลิงก์เท่านั้น ข้อผิดพลาดที่คุณกำลังทำอยู่อาจเป็นเพราะคุณกำลังนำเข้า BrowserRouter as Link ซึ่งหมายความว่า BrowserRouter มีชื่อว่า Link จากนั้นคุณใช้ Link (BrowserRouter) เพื่อนำทางไปยังเส้นทางนั้น แต่คุณต้องการ Link จริงเท่านั้น คุณสามารถอ่านเพิ่มเติมได้ในบทความที่ฉันได้เชื่อมโยงไว้ในคำตอบ - person Saqib; 06.08.2019

arrow_upward
1
arrow_downward

รหัสของคุณใช้งานไม่ได้เนื่องจากคุณได้เพิ่มปุ่มภายในแท็ก Link ดังนั้นเมื่อคลิกปุ่ม React จะเริ่มการทำงานของปุ่ม onClick เท่านั้นและ Link จะไม่มีการคลิก!

ในการแก้ปัญหา คุณสามารถลบปุ่มออกจากแท็กลิงก์ได้

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

หรือคุณสามารถใช้วิธีแก้ปัญหาด้านล่าง

แทนที่จะเพิ่มปุ่มใน Link คุณควรทำสิ่งนี้

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

เพิ่ม HOC withRouter ให้กับส่วนประกอบของคุณและคุณจะได้รับออบเจ็กต์ประวัติใน prop

person Sangam Rajpara    schedule 06.08.2019