如何在正确反应中实现嵌套路由

Question

这两天我都快疯了。请各位大侠帮忙。我正在尝试实现嵌套路由。但它不工作。当我转到 http://localhost:3000 时，它会正确显示。但是当我访问 http://localhost:3000/contact 时。它不起作用。我已经尽力了。请帮忙？？？？

//App js
import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Main from './features/Main/Main';
import Dashboard from './features/Dashboard/Dashboard';
import Nomatch from './features/Nomatch';

function App() {

    return (
        <div>
            <Switch>
                <Route exact path='/'> <Redirect to='/home' /></Route>
                <Route path="/home" component={Main} />
                <Route path="/dashboard" component={Dashboard} />
                <Route component={Nomatch} />
            </Switch>
        </div>
    );

}

export default App;

//////////////////////////////////

//Main.js
import React from 'react';
import { Switch, Route, useRouteMatch } from 'react-router-dom';
import Home from './Home';
import Contact from './Contact';

const Main = () => {
const { path, url } = useRouteMatch();
    return(
        <div>
            <Switch>
                <Route exact path='/' component={Home} />
                <Route path={`${path}/contact`} component={Contact} />
            </Switch>
        </div>
    )

}

export default Main

Answer 1

更新

您可以尝试在 Main 中进行更改：

            <Switch>
                <Route exact path='/' component={Home} />
                <Route path={`${path}/contact`} component={Contact} />
            </Switch>

通过

            <Switch>
                <Route exact path='/home'><Redirect to='/' /></Route>
                <Route exact path='/' component={Home} />
                <Route exact path='/contact' component={Contact} />
            </Switch>

在App

            <Switch>
                <Route path="/" component={Main} />
            </Switch>