React Router Pass Param to Component

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

如果要将props传递给路径中的组件,最简单的方法是使用render,如下所示:

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

您可以访问使用中的道具DetailPage:

this.props.match
this.props.globalStore

将{...props}需要通过原路线的道具,否则你将只能得到this.props.globalStore内DetailPage.

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

从带有钩子的 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 4

使用渲染方法:

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

你应该能够使用以下方式访问id:

this.props.id

在DetailsPage组件内

Answer 5

除了 Alexander Lunas 的回答......如果你想添加多个参数，只需使用：

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

适用于第 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;

   

Answer 7

使用组件：

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

并且您应该能够id使用：

this.props.match.params.id

内部DetailsPage组件

Answer 8

这是针对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使用您的组件。

解决方法是withRouter自己创建一个高阶组件函数。这是一个已弃用的 React-router-dom 助手。

//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));

Answer 9

这是打字稿版本。致力于"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: string; }