I am displaying three components in one single App.js. I need to route these components: I have main container CSV.js in which two components TABLE.js and FILEUPLOAD.js is present. The main route would be /csv-app. When a row in table is clicked the route should be /csv-app/table/:id
If you are using React Router the problem is quite easy solvable. See the nested routing example.
you should get something like this using React Router Dom
import { Switch, Route, Link, Redirect, BrowserRouter as Router } from "react-router-dom";
const Table = props =>(
<Switch>
<Route exact path="/csv-app/table/:id">
"table row ....."
</Route>
<Route axact path="/csv-app/table">
<table>
<Link to={`/csv-app/table/${2}`}></Link>
</table>
</Route>
</Switch>
)
const FileUpload = props => (<> file upload component </>)
const Csv = props => (
<Switch>
<Route exact path='/csv-app/table'>
<Table />
</Route>
<Route exact path='/csv-app/fileupload'>
<FileUpload />
</Route>
<Redirect to='/csv-app' />
</Switch>
)
const App = props => (
<Router basename="/">
<Csv />
</Router>
)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.