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 中进行更改：

xR1 <- data.frame("A" = c(15, 13.5, 12, 9.1, NA, NA, NA, NA), 
             "B" = c(13.6, 8.4, 6.7, 5.6, 2.0, NA, NA, NA), 
             "C" = c(NA, 8.5, 2.43, 1.23, NA,NA, NA, NA))

作者

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

在 App

中

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

如何正确执行嵌套路由

1 个答案: