如何在反應中為單個頁面中的多個組件進行嵌套路由

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>
)