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 组件执行子字符串匹配，因此 /employees/create 被 /employees 路由匹配。将 exact 道具传递给 Route 组件，以确保它仅在完全匹配时才呈现。

来自docs，

<块引用>

exact：bool

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

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

如何在反应路由器中使用子目录？

1 个答案: