用于 ReactJS 中的无路由组件的 useParams()答案

【问题标题】：useParams() for none route components in ReactJS用于 ReactJS 中的无路由组件的 useParams()
【发布时间】：2021-02-26 03:51:56
【问题描述】：

请浏览我的 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 中添加了该组件。当然，这个组件没有与之链接的路由。但是：

在 Navigation 和 Footer 中，我想使用 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

【问题讨论】：

标签： reactjs react-redux react-router navigation single-page-application

【解决方案1】：

尝试删除确切的？

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

【讨论】：

感谢您回答我的问题。尝试了这个解决方案，但仍然无法正常工作。它返回未定义。