Nested Route not working on React Router v6

diegoolavarriau 0
Viewed 36

I have a simple tree of routes, with a single nested route not working:

import React from 'react'
import Main from './Folders/Main'
import Create from './Folders/Create'
import {Outlet, Route} from 'react-router-dom'

const RenderFolders = () => (
  <div>
    <div>Folders</div>
    <Outlet />
  </div>
)

const App = () => {
  return [
    <Route index element={<Main />} />,
    <Route path="create" element={<Create />} />,
    <Route path="folders" element={<RenderFolders />}>
      <Route index element={<Main />} />
      <Route path="create" element={<Create />} />
    </Route>,
    <Route path="*" element={<div>Not Found</div>} />
  ]
}
export default App

The routes work like this:

  • localhost:8082/ -> <Main />
  • localhost:8082/create -> <Create />
  • localhost:8082/folders -> <RenderFolders><Main /></RenderFolders>
  • localhost:8082/folders/create -> Nothing, blank
  • localhost:8082/test -> <div>Not Found</div>

/folders/create is not rendering anything

Also, I'm getting the following error:

enter image description here

react-router-dom react-router reactjs
1 Answers

Thank you, the problem was a webpack.config.js parameter:

module.exports = {
  mode: 'development',
  target: 'web',
  devServer: {port: 8082, historyApiFallback: true},
  output: {
    publicPath: '/'     <----
  },
}

output.publicPath was commented due to this App is a MicroFrontEnd implementation. I'll try another way.

diegoolavarriau0
Related