Javascript 如何通过NavDropdown.Item链接将道具传递给react路由器组件

我正在动态构建一个下拉列表，我需要它将道具传递给route组件。我尝试了下面的技巧，我在这里找到了，但是没有用。非常感谢您的帮助

路由和链接组件（使用尝试的testprop道具）

---

React不是这样工作的。我不确定这些Navitem是什么，但它们本身不呈现任何React组件

Route

不过会使用

render

道具，它会呈现AlphaRun，这是您想要放置道具的地方，您想要传递道具

} />

---

现在，当您转到

/alpharun

URI时，它应该呈现react组件。

NavDropdown.Item

只是一个react组件，所以给它任何道具都不会将任何数据传递到

路径。如果您想将信息传输到路线道具中，您有两个实际选项：

1：使用路径包含url参数的路由
例如，这可能是
path=“/alpharun/：id”
。然后，您将使用
props.match.params.id
访问id。要转到此路径，您将使用

2：使用具有位置状态的链接：


可以使用
props.location.state
从路线访问此文件


这两种方法的不同之处在于，使用位置状态，您将无法直接从浏览器的URL栏访问它。
是的。。。我知道将道具直接传递到组件中是多么容易。正如我在OP中所说，我需要由
NavDropdown.Item
创建的链接将参数传递到组件中。就像查询字符串可以用来将参数传递到页面一样。这是很常见的事，没错。我曾尝试过选项1，但在
this.match.params
中缺少参数。谢谢你，伙计。
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import AlphaRun from './components/alpha-run/AlphaRun.jsx';

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

render(
  <div className="App container">
    <Router>
    <Navbar bg="dark" variant="dark" expand="lg">
            <Navbar.Brand href="/">OfficeX</Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">
                <Nav className="mr-auto">
                    <NavDropdown title="Class Lists" id="basic-nav-dropdown">
                        <NavDropdown.Item testprop="test" href="/alpharun">Alpha Run</NavDropdown.Item>
                    </NavDropdown>
                </Nav>
            </Navbar.Collapse>
    </Navbar>

        <Switch>
            <Route path="/alpharun" render={
                (props) => <AlphaRun {...props} />
            } />
        </Switch>
    </Router>    
</div>
, rootEl);  

componentDidMount() {
    alert(this.props.testprop);
}

<Link to={{ pathname: "alpharun", state: { id: 3 }}}></Link>