React Router v4 - จะหาเส้นทางปัจจุบันได้อย่างไร

ฉันต้องการที่จะแสดงtitleใน<AppBar />ที่อย่างใดผ่านมาจากเส้นทางปัจจุบัน

ใน React Router v4 จะ<AppBar />สามารถรับเส้นทางปัจจุบันที่ส่งเข้าสู่titleเสาได้อย่างไร

  <Router basename='/app'>
    <main>
      <Menu active={menu} close={this.closeMenu} />
      <Overlay active={menu} onClick={this.closeMenu} />
      <AppBar handleMenuIcon={this.handleMenuIcon} title='Test' />
      <Route path='/customers' component={Customers} />
    </main>
  </Router>

มีวิธีที่จะผ่านชื่อที่กำหนดเองจากที่กำหนดเองpropบน<Route />?

ในรุ่น 5.1 ปฏิกิริยาของเราเตอร์มีตะขอที่เรียกว่าuseLocationซึ่งจะส่งกลับวัตถุที่ตั้งปัจจุบัน สิ่งนี้อาจมีประโยชน์เมื่อใดก็ตามที่คุณจำเป็นต้องรู้ URL ปัจจุบัน

import { useLocation } from 'react-router-dom'

function HeaderView() {
  let location = useLocation();
  console.log(location.pathname);
  return <span>Path : {location.pathname}</span>
}

ในการตอบสนองเราเตอร์ 4 เส้นทางในปัจจุบันอยู่ใน this.props.location.pathname- เพิ่งได้รับ this.propsและยืนยัน หากคุณยังไม่เห็น แล้วคุณควรใช้มัณฑนากรlocation.pathnamewithRouter

อาจมีลักษณะเช่นนี้:

import {withRouter} from 'react-router-dom';

const SomeComponent = withRouter(props => <MyComponent {...props}/>);

class MyComponent extends React.Component {
  SomeMethod () {
    const {pathname} = this.props.location;
  }
}

หากคุณกำลังใช้ตอบสนองของแม่ที่ส่วนท้ายของคุณตอบสนองลักษณะไฟล์เช่นนี้export default SomeComponentคุณจำเป็นต้องใช้องค์ประกอบขั้นสูง (มักเรียกว่าเป็น withRouter"HOC")

ก่อนอื่นคุณจะต้องนำเข้าwithRouterดังนี้:

import {withRouter} from 'react-router-dom';

ถัดไปคุณจะต้องการที่จะใช้ withRouterคุณสามารถทำได้โดยเปลี่ยนการส่งออกส่วนประกอบของคุณ ก็จะให้คุณต้องการที่จะเปลี่ยนจากการexport default ComponentNameexport default withRouter(ComponentName)

จากนั้นคุณจะได้รับเส้นทาง (และข้อมูลอื่น ๆ ) จากอุปกรณ์ประกอบฉาก โดยเฉพาะlocation, และmatch historyรหัสในการคายชื่อพา ธ จะเป็น:

console.log(this.props.location.pathname);

การเขียนที่ดีพร้อมข้อมูลเพิ่มเติมมีอยู่ที่นี่: https://reacttraining.com/react-router/core/guides/philosophy

นี่คือวิธีใช้history อ่านเพิ่มเติม

import { createBrowserHistory } from "history";

const history = createBrowserHistory()

ภายในเราเตอร์

<Router>
   {history.location.pathname}
</Router>

มีเบ็ดที่เรียกว่าuseLocationใน react-router v5 ไม่จำเป็นต้องใช้ HOC หรือสิ่งอื่น ๆ มันกระชับและสะดวกสบายมาก

import { useLocation } from 'react-router-dom';

const ExampleComponent: React.FC = () => {
  const location = useLocation();  

  return (
    <Router basename='/app'>
      <main>
        <AppBar handleMenuIcon={this.handleMenuIcon} title={location.pathname} />
      </main>
    </Router>
  );
}

ฉันคิดว่าผู้เขียนของ React Router (v4) เพิ่งเสริมด้วย Router HOC เพื่อเอาใจผู้ใช้บางคน อย่างไรก็ตามฉันเชื่อว่าวิธีที่ดีกว่าคือการใช้ render prop และสร้างส่วนประกอบ PropsRoute ง่ายๆที่ผ่านอุปกรณ์ประกอบฉากเหล่านั้น การทดสอบนี้ง่ายกว่าเพราะคุณไม่ได้ "เชื่อมต่อ" ส่วนประกอบเช่น withRouter มีส่วนประกอบที่ซ้อนกันมากมายห่อหุ้มด้วยเสื้อนอกและมันจะไม่สนุก ข้อดีอีกอย่างก็คือคุณสามารถใช้บัตรผ่านนี้ในอุปกรณ์ประกอบฉากใดก็ตามที่คุณต้องการไปยังเส้นทาง นี่คือตัวอย่างง่ายๆโดยใช้การแสดงผล prop (ตัวอย่างที่แน่นอนจากเว็บไซต์ของพวกเขาhttps://reacttraining.com/react-router/web/api/Route/render-func ) (src / components / เส้นทาง / props-route)

import React from 'react';
import { Route } from 'react-router';

export const PropsRoute = ({ component: Component, ...props }) => (
  <Route
    { ...props }
    render={ renderProps => (<Component { ...renderProps } { ...props } />) }
  />
);

export default PropsRoute;

การใช้งาน: (แจ้งให้ทราบเพื่อรับ params เส้นทาง (match.params) คุณสามารถใช้ส่วนนี้และสิ่งเหล่านั้นจะถูกส่งให้คุณ)

import React from 'react';
import PropsRoute from 'src/components/routes/props-route';

export const someComponent = props => (<PropsRoute component={ Profile } />);

โปรดสังเกตว่าคุณสามารถผ่านอุปกรณ์ประกอบฉากพิเศษที่คุณต้องการได้เช่นกัน

<PropsRoute isFetching={ isFetchingProfile } title="User Profile" component={ Profile } />

มีคอน Posidielovthis.props.location.pathnameกล่าวว่าเส้นทางที่ปัจจุบันอยู่ในปัจจุบัน

แต่ถ้าคุณต้องการจับคู่เขตข้อมูลที่เฉพาะเจาะจงมากขึ้นเช่นคีย์ (หรือชื่อ) คุณอาจใช้matchPathเพื่อค้นหาการอ้างอิงเส้นทางเดิม

import { matchPath } from `react-router`

const routes = [{
  key: 'page1'
  exact: true,
  path: '/page1/:someparam/',
  component: Page1,
},
{
  exact: true,
  key: 'page2',
  path: '/page2',
  component: Page2,
},
]

const currentRoute = routes.find(
  route => matchPath(this.props.location.pathname, route)
)

console.log(`My current route key is : ${currentRoute.key}`)

เพิ่ม

import {withRouter} from 'react-router-dom';

จากนั้นเปลี่ยนการส่งออกส่วนประกอบของคุณ

export default withRouter(ComponentName)

จากนั้นคุณสามารถเข้าถึงเส้นทางภายในส่วนประกอบได้โดยตรง (โดยไม่ต้องแตะสิ่งใดในโครงการของคุณ) โดยใช้:

window.location.pathname

ทดสอบมีนาคม 2020 ด้วย: "version": "5.1.2"