Here is my code:
import './App.css';
import React from 'react';
import AddCallTree from './components/callTree/AddCallTree';
import CallTreeList from './components/callTree/CallTreeList';
import Home from "./components/Home";
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
export default function App() {
return (
<Router>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/callTree' element={<CallTreeList />}>
<Route path='new' element={<AddCallTree />} />
</Route>
</Routes>
</Router>
);
}
When I browse http://localhost:3000/callTree/new, it still shows the <CallTreeList /> component content, but not the <AddCallTree />.
When I move the following statement:
<Route path='new' element={<AddCallTree />} />
out of the "callTree" block, and then I browse http://localhost:3000/new, it works!
Would you help to fix the problem?
