如何通过NavDropdown.Item链接传递道具以反应路由器组件

Question

我正在动态构建一个下拉列表，我需要它来将道具传递到路线组件。我尝试了以下在SO上发现的技术，但没有成功。任何帮助表示赞赏。

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

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

如您所见，我试图在testprop链接中传递NavDropdown.Item。但是，这不起作用，并且在AlphaRun组件中未定义prop。

在AlphaRun组件中，我只是使用alert中的componentDidMount测试道具：

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

Answer 1

NavDropdown.Item只是一个React组件，因此给它任何道具都不会将任何数据传递给Route。如果要将信息传递到路线道具中，则有两个实际选择：

1：使用带有包含url参数的路径的路由

例如，它可以是path="/alpharun/:id"。然后，您将使用props.match.params.id访问ID。要使用此路线，您可以使用<Link to="/alpharun/foo"></Link>

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

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

可以通过props.location.state从路线中访问。

---

这两种方法的区别在于，使用位置状态时，您将无法直接从浏览器的URL栏中访问它。

Answer 2

那不是React的工作方式。我不确定这些NavItems是什么，但是它们本身不会渲染任何React组件。

Route与render道具一起使用，并渲染AlphaRun，您可以在其中放置要传递的道具。

<Route path="/alpharun" render={() =>
  <AlphaRun prop='here' testprop='test'/>
} />

现在，当您转到/alpharun URI时，它应该呈现该反应组件。