反应嵌套路由未正确执行

Question

我正在为Django应用程序创建Frontend。我想先将我的应用程序组件路由到以下组件中。

/
 /dashboard
 /about
 /contact

然后，仪表板组件的路由应为

/dashboard/
 /dashboard/notification/
 /dashboard/profile/

我已成功将我的App组件路由为

import React, { Component,Fragment } from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router, Switch,Route, Redirect} from 'react-router-dom'
import HomeMain from './layout/main/HomeMain';
import './css/style.css'
import Notfound from './layout/main/Notfound';
import Dashboard from './layout/dashboard/Dashboard';
class App extends Component{
    render(){
        return(
                <Router>
                    <Fragment>
                        <Switch>
                            <Route exact path="/dashboard" component={Dashboard}/>
                            <Route exact path="/" component={HomeMain}/>
                            <Route exact path="/not" component={Notfound}/>
                        </Switch>
                    </Fragment>
                </Router>
        );
    }
}
ReactDOM.render(<App/>,document.getElementById('app'));

然后，我尝试使用嵌套路由来路由我的仪表板，但输出在http://127.0.0.1:8000/dashboard/noti/中变成空白页。

import React, { Fragment } from 'react'
import '../../css/dash.css'
import '../../css/style.css'
import DashHeader from './DashHeader'
import DashMain from './Dmain/DashMain'
import NotiMain from './Dmain/NotiMain'
import { Switch, Route, BrowserRouter as Router } from 'react-router-dom'
class Dashboard extends React.Component{
    path=this.props.match.path


    render(){
        return(

                <Fragment>
                    <DashHeader/>
                    <Switch>
                        <Route exact path={`${this.path}/`}>
                            <DashMain/>
                        </Route>
                        <Route exact path={`${this.props.match.url}/noti`}>
                            <DashMain/>
                        </Route>
                    </Switch>
                </Fragment>

        )
    }
}
export default Dashboard

Answer 1

当Dashboard

组件具有子（嵌套）路由时，您需要从exact路由中删除exact：