如何将子目录与反应路由器一起使用？

Question

我是 React 新手并试图了解路由，特别是如何使用 URL 路径中的子目录。

这是我的App.js文件

import React from "react"
import {BrowserRouter as Router, Switch, Route } from "react-router-dom"    
import Home from "./Home"
import About from "./About"
import Contact from "./Contact"
import NavBar from "./NavBar"
import Employees from "./Employees"
import EmployeesCreate from "./EmployeesCreate" 
class App extends React.Component {
    render(){   
        return (
            <Router>
                <div>
                    <NavBar />
                    <Switch>
                        <Route exact path="/">
                            <Home />
                        </Route>
                        <Route path="/about">
                            <About />
                        </Route>
                        <Route path="/contact">
                            <Contact />
                        </Route>
                        <Route path="/employees">
                            <Employees />
                        </Route>
                        <Route path="/employees/Create">
                            <EmployeesCreate />
                        </Route>
                    </Switch>
                </div>
            </Router>
        )
    }
} 
export default App

我在使用/employees/create路径时遇到问题。 它正在加载Employees组件而不是EmployeesCreate组件。

我究竟做错了什么？

Answer 1

Route组件执行 substring 匹配，因此/employees/create与/employees路由匹配。 将exact prop 传递给Route组件，以确保它仅在完全匹配时才被渲染。

从文档中，

exact ： bool

如果为 true，则仅当路径与location.pathname完全匹配时才会匹配。

<Route exact path="/employees">
  <Employees />
</Route>