如何在反应中为单个页面中的多个组件进行嵌套路由

Question

我在一个 App.js 中显示三个组件。 我需要路由这些组件：我有主容器 CSV.js，其中存在两个组件 TABLE.js 和 FILEUPLOAD.js。 主要路线是/csv-app。 单击表中的一行时，路由应为 /csv-app/table/:id

Answer 1

如果你使用React Router ，这个问题很容易解决。 请参阅嵌套路由示例。

Answer 2

你应该使用 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>
)