Reactrouter.com/web/api/Nav…
When the value is true, only components whose routes match exactly will be applied.
-
Case 1: The Route is wrapped by the Switch
<Switch> <Route path='/login' component={Login} exact/> <Route path='/main' component={Main} /> </Switch> Copy the code
If there is a switch under the Main component, such as the switch of the menu bar, exact cannot be added. You must add exact to the child route.
Otherwise, child routes cannot be matched. Such as:
The child route /main/option1 does not match
You can only add exact on
-
Case 2: Route is not wrapped by Switch
<HashRouter> <Route path='/login' component={Login} /> <Route path='/' component={Main} /> </HashRouter> Copy the code
All components with ‘/’ will be matched, that is, Login and Main will be rendered, as shown below:
There are three ways to solve this problem:
(1) Do not use ‘/’ as a separate route, such as ‘/main’.
(2) Add exact attributes to Route components where path=’/’;
(3) Wrap all Route components with Switch components (case 1)
If path=’/’ has subcomponents, such as menu switches, then it may not match.
For example, /main/option cannot be accessed. If you add exact to the parent route, child routes cannot be matched.
Method (2) is not applicable.
Notes: Switch matches the first sublevel or
The above is my personal record of the problems encountered in the process of development. If there are any problems, please correct them