0

The issue is the ProdDetails component is not called when it is nested (products/:id). Even though the URL changes on the address bar, No changes in UI

Here is App.tsx

function App() {
return (
<div className="App">
  <Routes>
    <Route path='/' element={<Home />} />
    <Route path='products' element={<ProdList />} >
      <Route path=":id" element={<ProdDetails />} />
    </Route>
  </Routes>
</div>
);
}

The ProdList component

const ProdList: React.FC = () => {
const [prods, setProdList] = useState<IProducts>([])

useEffect(() => {
    ProdAPI.getAll()
        .then((list: IProducts) => {
            setProdList(list)
        })
}, [])

return(
    <div>
        <div>
            {prods.map((prod) => (
                <li key={(prod.id).toString()}>
                    <Link to={(prod.id).toString()}>
                        {prod.title}
                    </Link>
                </li>
            ))}
        </div>
    </div>
)
}
export default ProdList

It works when it is not nested. What is the reason for that?

ShoibAhamed
  • 327
  • 1
  • 5
  • 16
  • It does partially. Using the outlet, it appends the new component to existing component – ShoibAhamed Sep 04 '22 at 03:37
  • If I try the other solution, index={true}, Error: Type 'true' is not assignable to type 'false' – ShoibAhamed Sep 04 '22 at 03:38
  • For `index={true}` see this: [React Router 6 and Typescript - index attribute Type 'true' is not assignable to type 'false | undefined'.?](https://stackoverflow.com/q/70708422/3367974) (Short answer: _You need not to set path if index is true_) – Mehdi Dehghani Sep 04 '22 at 03:41

0 Answers0