Question

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？

Answer 1

如果您想将道具传递给路线内的组件，最简单的方法是使用parsec，如下所示：

render

您可以使用：

访问

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

内的道具

DetailPage

传递原始路线的道具需要this.props.match this.props.globalStore，否则您只能在{...props}内获得this.props.globalStore。

Answer 2

我用它来访问我的组件中的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，希望有助于某人。

Answer 3

使用渲染方法：

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

您应该能够使用以下方式访问ID：

this.props.id

在DetailsPage组件内

Answer 4

使用组件：

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

您应该能够使用：

访问id

this.props.params.id

在DetailsPage组件

中

Answer 5

另一种解决方案是在路由组件中使用状态和生命周期挂钩，并在to组件的<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>
        )
      }
    }

Answer 6

除了亚历山大·卢纳斯回答... 如果要添加多个参数，请使用：

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

Answer 7

这里是打字稿版本。适用于"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

导出接口ProblemRouteTokens { problemId：字符串； }

Answer 8

由于带有钩子的react-router v5.1：

import { useParams } from 'react-router';

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

请参见https://reacttraining.com/blog/react-router-v5-1/

Answer 9

如果您使用类组件，则最有可能使用GSerjo建议。通过<Route>道具将参数传递到目标组件：

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

Answer 10

这也是一个可行的选择

<Router>
    <Switch>
        <Route path="/details/:id" component={() => <DetailsPage />} />
    </Switch>
</Router>

详情页

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

const DetailsPage = () => {
    const {id} = useParams()
}

Answer 11

尝试一下。

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

在详细信息页面中尝试此...

this.props.id

React Router Pass Param to Component

11 个答案: