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

Question

I'm new to React and trying to understand routing, in particular how to work with subdirectories in the URL path.

Here is my App.js file

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

I'm having trouble with the /employees/create path. It is loading the Employees component instead of the EmployeesCreate component.

What am I doing wrong?

Answer 1

The Route component does a substring match and so /employees/create gets matched by the /employees route. Pass the exact prop to the Route component to make sure it only gets rendered when there's an exact match.

From the docs ,

exact : bool

When true, will only match if the path matches the location.pathname exactly.

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