CODEWITHSUNDEEP
reactjsreact-router
Ashraf Slamang
Ashraf Slamang

Reputation: 1013

React Router useParams hook returning empty object

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.

Upvotes: 11

Views: 15592

Answers (1)

Kirill Skomarovskiy
Kirill Skomarovskiy

Reputation: 1565

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

Upvotes: 11

Related Questions