当我的路线放置在子组件中时，url正在更改但组件未呈现

Posted 2023-02-21

【中文标题】当我的路线放置在子组件中时，url正在更改但组件未呈现

【英文标题】：when my route is placed in child components url is changing but component is not rendering

【发布时间】：2020-05-12 04:58:18

【问题描述】：

import './App.css';
import AppRoutes from './AppRoutes'
import BrowserRouter as Router from "react-router-dom"
import AppHeader from './modules/platform-components/app-header/AppHeader'

function App() 
  return (
    <div className="App">
      <AppRoutes />
    </div>
  );


export default App;```

// Above is my App.js

```import React,Component from "react"
import Route,Switch from "react-router-dom"
import Login from "./modules/authentication/login/Login"
import BaseApp from "./modules/platform-components/base-app/BaseApp"
export default function AppRoutes ()

        return (
            <Switch>
                <Route path="/" exact component=Login/>
                <Route path="/login" component=Login/>       
                <Route exact path="/app" component=BaseApp/>
            </Switch>           

        )

```

//above is AppRoutes.js

从“react”导入 React,Component 从“./Routes”导入路线 从 '../app-header/AppHeader' 导入 AppHeader 从“react-router-dom”导入 Route,Switch,Link,withRouter,useRouteMatch 函数 BaseApp() 让匹配= useRouteMatch() 返回 （ 基础应用组件 应用标题 ) 导出默认 BaseApp;```

//这是我的baseApp

 function Appheader()
        return (
            <div>App Header Component</div>
        )    

export default Appheader;```

//above is my app header 
`when i am entering url /app it isnavigating to baseApp component but when i enter /app/appheader it's not rendering anything but url is changed `

【参考方案1】：

用这个切换你的路线

<Switch>
   <Route exact path="/" exact component=Login/>
   <Route path="/app" component=BaseApp/>
   <Route path="/login" component=Login/>       
   <Route component=() => <div>Not Found</div>/> // you could also add this line to cater with your 404 routes
</Switch>

在此处阅读更多信息：https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Route.md