컴포넌트에 대한 리액트라우터 패스 파라미터

컴포넌트에 대한 리액트라우터 패스 파라미터

const rootEl = document.getElementById('root');

ReactDOM.render(
    <BrowserRouter>
        <Switch>
            <Route exact path="/">
                <MasterPage />
            </Route>
            <Route exact path="/details/:id" >
                <DetailsPage />
            </Route>
        </Switch>
    </BrowserRouter>,
    rootEl
);

DetailsPage 컴포넌트에서 ID에 액세스하려고 하는데 액세스할 수 없습니다.나는 노력했다.

<DetailsPage foo={this.props}/>

파라미터를 DetailsPage에 전달하지만 헛수고입니다.

export default class DetailsPage extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className="page">
            <Header />
            <div id="mainContentContainer" >

            </div>
            </div>
    );
    }
}

그럼 ID를 DetailsPage에 넘기는 방법은 없나요?

컴포넌트의 ID에 액세스하기 위해 다음과 같이 사용했습니다.

<Route path="/details/:id" component={DetailsPage}/>

세부 구성 요소:

export default class DetailsPage extends Component {
  render() {
    return(
      <div>
        <h2>{this.props.match.params.id}</h2>
      </div>
    )
  }
}

이렇게 하면 h2 내의 모든 ID가 표시되므로 누군가에게 도움이 되길 바랍니다.

은 '소품'을 하는 입니다.render 이렇게요.

<Route exact path="/details/:id" render={(props) => <DetailsPage globalStore={globalStore} {...props} /> } />

은 이 안에 을 볼 수.DetailPage 라이선스:

this.props.match
this.props.globalStore

{...props}소품을 않으면 이 소품만 받게 됩니다. 그렇지 않으면, 당신은 단지 얻을 것입니다.this.props.globalStore내 the의 DetailPage.

리액트 라우터 v5.1에 후크가 있으므로:

import { useParams } from 'react-router';

export default function DetailsPage() {
  const { id } = useParams();
}

https://reacttraining.com/blog/react-router-v5-1/ 를 참조해 주세요.

렌더링 방법 사용:

<Route exact path="/details/:id" render={(props) => (
    <DetailsPage id={props.match.params.id}/>
)} />

그리고 다음 방법으로 ID에 액세스할 수 있어야 합니다.

this.props.id

DetailsPage 구성 요소 내부

알렉산더 루나스의 대답 외에...인수를 여러 개 추가하려면 다음 명령을 사용하십시오.

<Route path="/details/:id/:title" component={DetailsPage}/>

export default class DetailsPage extends Component {
  render() {
    return(
      <div>
        <h2>{this.props.match.params.id}</h2>
        <h3>{this.props.match.params.title}</h3>
      </div>
    )
  }
}

구성 요소 사용:

<Route exact path="/details/:id" component={DetailsPage} />

이 때 접속할 수 있어야 합니다.id 라이선스:

this.props.match.params.id

<고객명>DetailsPage 표시

이것은 react-router-dom v6용입니다(기능 컴포넌트를 사용하는 것을 강력히 권장합니다).

react-router-dom이 구문과 규칙을 계속 변경하는 것은 다소 고통스럽다.하지만 여기엔 아무것도 없어.

다 쓸 수요.useParams ★★★★★★★★★★★★★★★★★」useSelector 문제를 해결하기

import { useParams } from 'react-router';
import { useSelector } from 'react-redux';

const Component = () => {
const { id } = useParams();                              //returns the :id
const page = useSelector((state) => state.something[id]); //returns state of the page

return <div>Page Detail</div>;
}

export default Component;

액션 하고 싶을 됩니다.connect

export const connect(mapStateToProps, mapDispatchToProps)(Component)

중이기 useParams.mapStateToProps가 ★★★★★★★★★★★★★★★」

const mapStateToProps = (state, ownProps) => {
console.log(ownProps)   //wont recognize :id
//hence
return {
  someReducers: state.someReducers[id] //would return an error: 'id' is not defined
 };
};

'무시하다', '무시하다', '는수 없습니다.connect을 제공합니다.mapDispatchToProps컴포넌트를 조작할 수 있습니다.

를 해결하려면 Component를 .withRouter스스로 기능합니다.이것은 권장되지 않는 리액트 라우터 돔 도우미입니다.

//make this
import { useParams, useLocation, useNavigate } from 'react-router';
import { connect } from 'react-redux';
import { yourActionCreator } from '../actionCreator';

const withRouter = (Child) => {
return (props) => {
 const location = useLocation();
 const navigation = useNavigate();
 const params = useParams();
 return (
   <Child
   {...props}
   params={params}
   navigate={navigate}
   location={location}
   />
  );
 };
};

const Component = () => {
// your component...
return <div> Page Detail </div>
};

export mapStateToProps = (state, ownProps) => {
console.log(ownProps)     // would contain the :id params
return {
//something
 }
};

const mapDispatchToProps = {
yourActionCreator
}

export withRouter(connect(mapStateToProps, mapDispatchToProps)(Component));

을 "react-router-dom": "^4.3.1"

export const AppRouter: React.StatelessComponent = () => {
    return (
        <BrowserRouter>
            <Switch>
                <Route exact path="/problem/:problemId" render={props => <ProblemPage {...props.match.params} />} />
                <Route path="/" exact component={App} />
            </Switch>
        </BrowserRouter>
    );
};

및 컴포넌트

export class ProblemPage extends React.Component<ProblemRouteTokens> {

    public render(): JSX.Element {
        return <div>{this.props.problemId}</div>;
    }
}

서 ''는ProblemRouteTokens

내보내기 인터페이스 ProblemRoute토큰 { 문제ID: 문자열; }

하고,또한 .to의 of의 <Link /> 변수는 나중에 검색 매개 변수를 통해 액세스할 수 .new URLSearchParams();

<Link 
  key={id} 
  to={{
    pathname: this.props.match.url + '/' + foo,
    search: '?foo=' + foo
  }} />

<Route path="/details/:foo" component={DetailsPage}/>

export default class DetailsPage extends Component {

    state = {
        foo: ''
    }

    componentDidMount () {
        this.parseQueryParams();
    }

    componentDidUpdate() {
        this.parseQueryParams();
    }

    parseQueryParams () {
        const query = new URLSearchParams(this.props.location.search);
        for (let param of query.entries()) {
            if (this.state.foo!== param[1]) {
                this.setState({foo: param[1]});
            }
        }
    }

      render() {
        return(
          <div>
            <h2>{this.state.foo}</h2>
          </div>
        )
      }
    }

버전 6의 경우 (2022년)

참고: useParams를 사용하면 컴포넌트에 파라미터를 쉽게 가져올 수 있습니다.

아래의 예를 보다

import React from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import Home from "./compo/home";
import About from "./compo/about";
import Login from "./compo/login";
import "./styles.css";
const App = () => {
  return (
    <Router>
      <div className="container">
        <Link to="/home">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/login">Login</Link>
      </div>
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/login" element={<Login />} />
        <Route path="/login/:name" element={<Login />} />
      </Routes>
    </Router>
  );
};
export default App;

로그인 컴포넌트

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

const Login = () => {
  let { name } = useParams();

  return <h1>i am {name ? <b>{name}</b> : "login"}</h1>;
};
export default Login;

   

클래스 구성 요소를 사용하는 경우 Gserjo 제안을 사용할 가능성이 높습니다.매개 변수를 통과합니다.<Route>대상 컴포넌트에 소품 제공:

exact path="/problem/:problemId" render={props => <ProblemPage {...props.match.params} />}

의 최신 버전(react-router-dom@6.3.0)에서는 다음과 같이 실행할 수 있습니다.

 <Route path="path" element={<YourComponent type="simple" />} />

여기서 type은 Your Component에 전달된 입력입니다.

react-router-dom 버전 6.3.0에서 작업하고 있었는데, 그 이상의 솔루션으로는 문제가 해결되지 않았습니다.그런 다음 이런 것을 사용했는데 효과가 있었습니다.

<Route exact path='/payment-status/:userId/:orderId' element={<PaymentStatus/>}/>

Payment Status.js 페이지에서 다음과 같이 했습니다.

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

export const PaymentStatus = () => {

let {userId, orderId}=useParams()

return (
    <div>
    <h2>order ID : {orderId}</h2>
    <h2>user ID : {userId}</h2>
    </div>
  )
}

그것은 나에게 효과가 있었다.도움이 됐으면 좋겠어요.감사합니다!

이거 먹어봐.

<Route exact path="/details/:id" render={(props)=>{return(
    <DetailsPage id={props.match.params.id}/>)
}} />

상세페이지에서 이것을 시험해 보세요...

this.props.id

Class, HoC 및 Router v5의 간단한 예

패키지.json

"react-router-dom": "5.3.1",
"react-router": "5.3.1",
"@types/react-router-dom": "5.3.3",

// YourComponent.tsx

import React from 'react';
import { RouteComponentProps, withRouter } from 'react-router';

export interface PathParams {
    id: string;
}

export interface Props extends RouteComponentProps<PathParams> {}
export interface State {}

class YourComponent extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state = {};

        console.log(props.match.params) // { id: 1 }
        // TypeScript completions
        console.log(props.match.params.id) // 1
    }

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

export default withRouter(YourComponent);

// App.tsx

import './App.css';

import React from 'react';
import { Route, Switch, Router } from 'react-router-dom';

import YourComponent from './YourComponent';

function App(): JSX.Element {
    return (
        <Router>
            <Switch>
                <Route
                    path="/details/:id"
                    component={() => <YourComponent />}
                />
            </Switch>
        </Router>
    );
}

export default App;

언급URL : https://stackoverflow.com/questions/45898789/react-router-pass-param-to-component