I can't seem to figure out why my router routes aren't rendering. I am in the very beginning of building my app so there isn't much code and I've tried several different methods and still nothing. I just have div's right now in the components i'm trying to route and the text inside isn't coming up - they were working when I had just the components in my App.js file before I tried routing them. Any ideas?
import React from 'react';
import './App.css';
import { BrowserRouter as Router, Routes, Route} from 'react-
router-dom'
import Main from './components/Main';
import AddUser from './components/AddUser';
import EditUser from './components/EditUser';
function App() {
return (
<div className="App">
<header className="App-header">
<h1>Home</h1>
</header>
<Router>
<Routes>
<Route exact path="/" component={Main} />
<Route path="/AddUser" component={AddUser} />
<Route path="/edit" component={EditUser} />
</Routes>
</Router>
</div>
);
}
export default App;
// My JSON file \
{
"name": "w15-crud",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.2.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
"react-scripts": "^2.1.3",
"reactstrap": "^9.0.2",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
The react-router-dom@6 Route component API changed. There is no longer a component prop for rendering routed components. Use the element prop and pass a ReactNode, a.k.a. JSX.
See Routes and Route
declare function Route( props: RouteProps ): React.ReactElement | null; interface RouteProps { caseSensitive?: boolean; children?: React.ReactNode; element?: React.ReactNode | null; index?: boolean; path?: string; }
Example:
<Router>
<Routes>
<Route path="/" element={<Main />} />
<Route path="/AddUser" element={<AddUser />} />
<Route path="/edit" element={<EditUser />} />
</Routes>
</Router>