CODEWITHSUNDEEP
react-routerreact-router-dom
Ryan Vice
Ryan Vice

Reputation: 2181

Link in React Router won't let me navigate as expected

I have an app that allows you to navigate

/user=>/user/userid

once I'm on user/userid I want to create links to /reports/reportid

I'm using this code

function ReportItem({ report }) {
    const to = `reports/${report.id}`

    return (
        <li className='user'>
            <Link to={to}>{report.date}</Link>
        </li>
    )
}

However this results in me navigating to /users/reports/reportid instead of /reports/reportid. I can't figure out what I'm doing wrong here.

Upvotes: 0

Views: 32

Answers (1)

Ryan Vice
Ryan Vice

Reputation: 2181

@kluddizz comment is the correct solution. I just need to update the config to prefix a / as shown below

function ReportItem({ report }) {
    const to = `/reports/${report.id}` // <=== prefixed a / to fix issue

    return (
        <li className='user'>
            <Link to={to}>{report.date}</Link>
        </li>
    )
}

Upvotes: 1

Related Questions