I am trying to make a simple registration program with react JS but got stuck when it is not able to render my App and Register component .
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import App from "./App";
import Register from "./screens/Register";
ReactDOM.render(
<BrowserRouter>
<Routes>
<Route path="/" exact render={(props) => <App {...props} />} />
<Route
path="/register"
exact
render={(props) => <Register {...props} />}
/>
</Routes>
</BrowserRouter>,
document.getElementById("root")
);
As much as I know, there isn't any prop like render in the routecomponent of react-router@v6. There is hooks that are usable in your pages to get data related to the routing. You will find them in the official documentation.
(Consider reading the links about migration from the v5 or from react-router).
You can of course still pass regular props in your component. See an example on Stackblitz here and here is the code :
import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Routes, Link, Route } from 'react-router-dom';
import './style.css';
const Page1 = (props) => <Link to="page2"> {props.test} - Go to Page 2</Link>;
const Page2 = () => <Link to="/">Go to Page 1</Link>;
const App = () => {
return (
<BrowserRouter>
<Routes>
<Route path="/" exact element={<Page1 test="Test" />} />
<Route path="/page2" exact element={<Page2 />} />
</Routes>
</BrowserRouter>
);
};
render(<App />, document.getElementById('root'));