React Router useParams hook returning empty object

Ashraf Slamang :

I'm having an issue with React Router not getting params using the useParams hook. When going to the route /view/12345 (browser path includes basename /pending-nominations/view/12345) the console.log() logs an empty object here {} where it should be displaying the id eg. {id: 12345}

const SingleRecognition = (props) => {
    let params = useParams();
    console.log("SingleRecognition -> params", params)

    return (
        <div>
            id: 
        </div>
    );
}

function App() {
    return (
        <Provider store={store}>
            <ThemeProvider theme={theme}>
            <Router basename="/pending-nominations">
                <PageNav/>
                <Switch>
                    <Route path="/history">
                        <History/>
                    </Route>
                    <Router path="/view/:id">
                        <SingleRecognition/>
                    </Router>
                    <Route path="/">
                        <PendingRecognitions/>
                    </Route>
                </Switch>
            </Router>
            </ThemeProvider>
        </Provider>
    );
}

Looking at the example https://reacttraining.com/react-router/web/api/Hooks/useparams this should work.

Kirill Skomarovskiy :

I think you have problem because you used Rourer instead of Route.

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=383597&siteId=1

React Router useParams hook returning empty object

React.js useRef hook not returning the expected object

Spring Boot - Rest Controller is returning empty object when using Lombok

React hook function (hook)

On the Hook [React]

vue-router hook

[Web front-end] react router4.0 browsing page after login before returning (back to the source page)

Specific Search Results Returning Empty (Spotify API)

Collector returning singletonList if toList returned empty list

The solution to the problem of Scrapy returning an empty list

Returning generic object from function

React Hook Quick Start

React Hook Flow Diagram

Hook the use of react

react-Hook

React Hook introduction and use

React Hook: useEffect

React HOOK2

React hook summary

react hook实现

react:Hook API

useLayoutEffect hook function in React

useCallback hook function in React

Object to determine whether the object is empty

js a determination object object is empty

Object sentenced empty

Check if an object is empty? js

How to check if an object is empty

How to check object empty?

How to check if an object is empty{}