[SOLVED] Redirect when path parameter is not provided in react-router-dom

Redirect when path parameter is not provided in react-router-dom

I have the following routes defined in react-router-dom

<Route id='editor' path='editor' >
  <Route index element={<Editor />} />
  <Route id='edit' path='edit/:documentId' element={<Edit />} />
</Route>

This allows me to do go the the following paths

"/editor" <---- This displays the <Editor /> component

"/editor/edit/13" <---- This displays the <Edit /> component, and loads the document with documentId = 13

However, I would like to redirect to "/editor" when I type the following path in the url: "/editor/edit" (note that documentId is missing).

NOTE: One thing I tried is make documentId optional (note the presence of a question mark after documentId):

<Route id='edit' path='edit/:documentId?' element={<Edit />} />

However, this results in showing <Edit /> component but with documentId being undefined. This is not what I'd like to achieve. Instead, I would like to redirect to "/editor" and display the <Editor /> component.

How do I do that?

Solution

Render a route on path "../editor/edit" that redirects to the parent "../editor" path.

Examples:

<Route id="editor" path="editor">
  <Route index element={<Editor />} />
  <Route path="edit" element={<Navigate to=".." replace />} />
  <Route id="edit" path="edit/:documentId" element={<Edit />} />
</Route>

<Route id="editor" path="editor">
  <Route index element={<Editor />} />
  <Route path="edit">
    <Route index element={<Navigate to=".." replace />} />
    <Route id="edit" path=":documentId" element={<Edit />} />
  </Route>
</Route>