คำถามติดแท็ก react-router

ฉันพยายามที่ออกมาตอบสนอง-Router (v4) และฉันมีปัญหาในการเริ่มต้นออก Nav จะมีหนึ่งของLink's activeBE หากฉันคลิกที่Linkแท็กใด ๆสิ่งที่ใช้งานอยู่จะเริ่มทำงาน อย่างไรก็ตามฉันต้องการให้ Home Linkใช้งานได้ทันทีที่แอปเริ่มทำงานเนื่องจากเป็นส่วนประกอบที่โหลดใน/เส้นทาง มีวิธีใดบ้างที่จะทำเช่นนี้? นี่คือรหัสปัจจุบันของฉัน: const Router = () => ( <BrowserRouter> <div> <Nav> <Link activeClassName='is-active' to='/'>Home</Link> {/* I want this to start off as active */} <Link activeClassName='is-active' to='/about'>About</Link> </Nav> <Match pattern='/' exactly component={Home} /> <Match pattern='/about' exactly component={About} /> <Miss …

91 javascript  reactjs  ecmascript-6  react-router 

มีวิธีรับReact Routerเพื่อเปิดลิงค์ในแท็บใหม่หรือไม่? ฉันลองสิ่งนี้แล้วก็ไม่ได้ผล <Link to="chart" target="_blank" query={{test: this.props.test}} >Test</Link> เป็นไปได้ที่จะทำให้ยุ่งเหยิงโดยการเพิ่มสิ่งที่ต้องการonClick="foo"ลงในลิงก์เช่นเดียวกับที่ฉันมีด้านบน แต่จะมีข้อผิดพลาดคอนโซล ขอบคุณ.

91 reactjs  react-router 

ฉันมีปัญหาเกี่ยวกับสไตล์การใช้ react-router และ react-bootstrap ด้านล่างนี้เป็นข้อมูลโค้ด import { Route, RouteHandler, Link } from 'react-router'; import AuthService from '../services/AuthService' import { Button, Nav, Navbar, NavDropdown, MenuItem, NavItem } from 'react-bootstrap'; <Nav pullRight> <NavItem eventKey={1}> <Link to="home">Home</Link> </NavItem> <NavItem eventKey={2}> <Link to="book">Book Inv</Link> </NavItem> <NavDropdown eventKey={3} title="Authorization" id="basic-nav-dropdown"> <MenuItem eventKey="3.1"> <a href="" onClick={this.logout}>Logout</a> …

86 react-router  react-bootstrap 

ฉันกำลังใช้เบ็ดประวัติศาสตร์ใหม่ของ React Router ซึ่งออกมาเมื่อไม่กี่สัปดาห์ที่ผ่านมา เวอร์ชั่น React-router ของฉันคือ 5.1.2 React ของฉันอยู่ที่เวอร์ชัน 16.10.1 คุณสามารถค้นหารหัสของฉันที่ด้านล่าง แต่เมื่อฉันนำเข้าการใช้งานใหม่ประวัติจาก react-router ฉันได้รับข้อผิดพลาดนี้: Uncaught TypeError: Cannot read property 'history' of undefined ซึ่งเกิดจากสายนี้ใน React-router function useHistory() { if (process.env.NODE_ENV !== "production") { !(typeof useContext === "function") ? process.env.NODE_ENV !== "production" ? invariant(false, "You must use React >= 16.8 in …

18 reactjs  react-router  react-hooks  react-router-dom  react-context 

ฉันใช้ UseHistory hook ใน router router v5.1.2 กับ typescript หรือไม่ เมื่อเรียกใช้การทดสอบหน่วยฉันพบปัญหา TypeError: ไม่สามารถอ่าน 'ประวัติ' ของคุณสมบัติที่ไม่ได้กำหนด import { mount } from 'enzyme'; import React from 'react'; import {Action} from 'history'; import * as router from 'react-router'; import { QuestionContainer } from './QuestionsContainer'; describe('My questions container', () => { beforeEach(() => { …

17 reactjs  typescript  react-router  jestjs  enzyme 

ฉันใหม่ในNext.jsและฉันสงสัยว่าจะเปลี่ยนเส้นทางจากหน้าเริ่มต้น ( / ) ไปยัง/ hello-nextjsได้อย่างไร เมื่อผู้ใช้โหลดหน้าและหลังจากนั้นกำหนดว่าเส้นทาง === / redirect ไปยัง/ hello-nextjs ในการตอบสนองเราเตอร์เราทำสิ่งที่ชอบ: <Switch> <Route path="/hello-nextjs" exact component={HelloNextjs} /> <Redirect to="/hello-nextjs" /> // or <Route path="/" exact render={() => <Redirect to="/hello-nextjs" />} /> </Switch>

15 html  reactjs  routing  react-router  next.js 

ฉันกำลังพยายามโหลดมุมมองรายละเอียดตามเส้นทาง react-router-dom ที่ควรคว้าพารามิเตอร์ URL (id) และใช้เพื่อเติมองค์ประกอบเพิ่มเติม เส้นทางของฉันดูเหมือน/task/:idและส่วนประกอบของฉันโหลดได้ดีจนกระทั่งฉันพยายามคว้า: id จาก URL ดังนี้: 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>; } } …

14 reactjs  react-router 

ฉันกำลังสร้างแอปพลิเคชันหน้าเดียว React และฉันสังเกตว่าการคืนค่าการเลื่อนไม่ทำงานตามที่คาดไว้ใน Chrome (และเบราว์เซอร์อื่น ๆ ) ใน react-dom-gomub repo พวกเขามีหน้าเว็บที่บอกว่าเบราว์เซอร์เริ่มต้นจัดการการเลื่อนสำหรับแอพหน้าเดียวและพฤติกรรมจะคล้ายกับหน้าเว็บที่ไม่ใช่สปาแบบดั้งเดิมหากhistory.scrollRestorationตั้งค่าเป็นauto. พฤติกรรมที่ฉันต้องการมีการระบุไว้ในหน้านั้น: เลื่อนขึ้นบนการนำทางเพื่อไม่ให้หน้าจอใหม่เลื่อนไปที่ด้านล่าง การคืนค่าตำแหน่งเลื่อนของหน้าต่างและองค์ประกอบที่เกินจากการคลิก "ย้อนกลับ" และ "ส่งต่อ" (แต่ไม่ใช่การคลิกลิงก์!) แต่ฉันต้องปิดการทำงานของเส้นทางที่มีแท็บหรือม้าหมุนด้วย นี่คือลิงค์ไปยังข้อมูลจำเพาะของ Chrome ในเรื่องนี้ สิ่งที่ฉันสังเกตใน Chrome เวอร์ชัน 78.0.3904.97 (รุ่นเป็นทางการ) (64 บิต) สำหรับ OS X คือสิ่งที่ฉันคาดหวังจากการhistory.scrollRestoration manualตั้งค่า นั่นคือเมื่อฉันเลื่อนหน้าเว็บลงครึ่งหนึ่งและฉันคลิกลิงก์หน้าถัดไปจะเลื่อนลงครึ่งหนึ่งของหน้าไปยังจุดเดียวกับหน้าก่อนหน้า ฉันได้ตรวจสอบhistory.scrollRestorationจุดต่าง ๆ แล้วพบว่ามันเริ่มต้นและคงอยู่autoเป็นค่าเริ่มต้น จุดสำคัญอย่างหนึ่งของที่นี่คือจากคำตอบของ @ TrevorRobinson "ความพยายามอัตโนมัติของเบราว์เซอร์ในการเรียกคืนการเลื่อน ... ... ส่วนใหญ่ไม่ทำงานสำหรับแอปหน้าเดียว ... " ตกลง ... ฉันพบการสนับสนุนที่สอดคล้องกันhistory.scrollRestorationแต่ …

11 javascript  reactjs  google-chrome  react-router