react 路由配置

app.js

import React from 'react';
import './App.css';

// 导入路由
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";

//导入页面级组件
import Login from "./pages/Login";
import Register from "./pages/Register";
import Article from "./pages/Article";
import TableBox from "./pages/Table";
import TableBox1 from "./pages/table1";
import Hook from "./pages/Hook";
function App() {
    return(
        <Router>
            <div>
                {/*路由配置*/}
                <Switch>

                    <Route path="/Login">
                        <Login />
                    </Route>
                    <Route path="/Register">
                        <Register  />
                    </Route>
                    <Route path="/Article">
                        <Article />
                    </Route>
                    <Route path="/">
                        {/*<Hook />*/}
                        <TableBox></TableBox>
                        {/*<TableBox1 />*/}
                    </Route>
                </Switch>
            </div>
        </Router>
    )
}

export default  App;

配置子路由

import React from "react";
import "./index.css"

// 导入路由
import {
    Switch,
    Route,
    Link,
    useRouteMatch
} from "react-router-dom";

import NavHeader from "../../components/NavHeader";
import LeftMenu from "../../components/LeftMenu";
// 子路由
import Release from "./Release";
import List from "./List";
import Edit from "./Edit";

function Layout(props) {
    let match = useRouteMatch();
    return(
        <div>
            <NavHeader></NavHeader>
            <div className="main">
                <LeftMenu></LeftMenu>
                <div className="content">
                    {/*配置子路由*/}
                    <Switch>
                        <Route path={`${match.path}/edit`}>
                            <Edit/>
                        </Route>
                        <Route path={`${match.path}/release`}>
                            <Release/>
                        </Route>
                        <Route path={`${match.path}/list`}>
                            <List/>
                        </Route>
                        {/*默认显示的子路由*/}
                        <Route path={match.path}>
                            <List/>
                        </Route>
                    </Switch>
                </div>
            </div>

        </div>
    )
}


export default Layout