I'm having a problem with my routes in React v.18. I cannot get a login page to render.
Index.js
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(
<React.StrictMode>
<Router>
<App/>
</Router>
</React.StrictMode>
);
App.js
export const App = () => (
<>
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
</Routes>
</>
)
export default App;
I get this error message in the console: Uncaught TypeError: Cannot read properties of undefined (reading 'pathname'). And it says the error is coming from the component. But I don't have access to change anything in the <Router>
component.
What am I doing wrong?
CodePudding user response:
First, make sure that all 'react-router-dom' related are imported properly.
ex.
import { BrowserRouter as Router, Route, Routes} from 'react-router-dom'
then try doing this to yout index.js:
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
then to your App.js:
<Router>
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
</Routes>
</Router>
Hope that helps