Question

我已经使用npx create-react-app创建了一个React应用程序。我正在使用React Router来控制路由。我需要能够从props.location.search组件内部访问Navbar。但是，由于Navbar不是Route的后代，因此location属性不会自动传递到导航栏。如何获得此属性并将其传递到Navbar内部的App.js？

// App.js
import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import { Container } from 'react-bootstrap';
import Navbar from './components/navbar';

function App() {
    return (
        <Router>
            <Switch>
                <Navbar location={LOCATION NEEDS TO BE PASSED} />
                <Container>
                    <Route path="/" exact component={HomePage} />
                </Container>
            </Switch>
        </Router>
    );
}

export default App;

Answer 1

在<Navbar/>组件内部，您可以使用useLocation钩子访问位置（如果navbar是函数而不是类）

    const { pathname } = useLocation();

，您可以通过useLocation钩子访问更多路线信息

Answer 2

通过用Navbar包装withRouter组件，我可以访问react路由器传递的属性。

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

class Navbar extends Component {
    componentDidMount() {
        console.log(this.props.location.search);
    }
}

export default withRouter(Navbar);

反应路由器：将此this.props.location传递给导航栏组件

2 个答案: