Question

请浏览我的 App.js

<Provider store={reduxStore}>
    <Router basename={process.env.PUBLIC_URL}>
        <Container>
            <Navigation /> <----------------------------------- HERE
            <div className="wrapper">
                <Switch>
                    <PublicRoute exact path={PATHS.HOME} component={Home} />
                </Switch>
            </div>
            <Footer/> <---------------------------------------- HERE
        </Container>
    </Router>
</Provider>

所有组件都使用导航，所以我在 App.js 中添加了该组件。当然，这个组件没有链接到它的路由。但是：

在导航和页脚中，我想使用useParams()。

Navigation.js

import React from 'react';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import { withRouter, useParams } from 'react-router-dom';

const Navigation = (props) => {
    const { slug } = props;

    return (
        <>
            <Navbar>
                <Nav>
                    <Nav.Link>
                        Home
                    </Nav.Link>
                </Nav>
            </Navbar>
        </>
    );
};

export default withRouter(Navigation);

我当前的网址：

localhost:3000/event/:slug

我确实收到了道具，但我找不到slug

Answer 1

尝试删除精确的？

  <Switch>
    <PublicRoute path={PATHS.HOME} component={Home} />
  </Switch>

在 ReactJS 中使用无路由组件的 useParams()

1 个答案: