I use react with following dependencies with the specified versions
{
"react-router-dom": "^5.2.0",
"react-dom": "^16.14.0",
}
and I want to have a route like this
I have
<BrowserRouter>
<Switch>
<PublicRoute component={Login} path="/" exact />
<PublicRoute component={Login} path="/login" exact />
<PrivateRoute component={Dashboard} path="/dashboard"/>
<Route to="/404" component={NotFound} />
</Switch>
</BrowserRouter>
On the dashboard I have this
<Router>
<Navbar />
<Switch>
<Route path={`/dashboard/buyList`} component={BuyList} />
<Route exact path='/dashboard/buyList/new' component={NewBuy} />
<Route path={`/dashboard/buyList${ids.id}`} component={BuyInfo}/>
<Route path='/dashboard/showAddress' component={ShowAddress} exact/>
<Route path='/dashboard/qrScanner' component={QrScanner} exact/>
<Route path='/dashboard/productList' component={ProductList} exact/>
<Route path='/dashboard/productListCode' component={ProductListCode} exact/>
<Route path='/dashboard/deliveryScanner' component={DeliveryScanner} exact/>
<Route path='/dashboard' component={DashboardDetail} exact/>
<Route path="/404" component={NotFound} />
</Switch>
</Router>
but in "/dashboard/buyList/new"
is loading the component of "/dashboard/buyList"
You can add the exact
param to /dashboard/buyList
<Switch>
<Route path= '/dashboard/buyList' component={BuyList} exact />
<Route exact path='/dashboard/buyList/new' component={NewBuy} />
//other routes
<Switch>
Router
around the dashboard routes.exact
prop everywhere isn't a magic bullet. It won't necessarily solve your problem correctly here. The Switch
component only renders the first match it finds, even if the one you really want to match and render is later in the "list". In this case "/dashboard/buyList" is less specific than "/dashboard/buyList/new" but because it's a prefix to the actual path "/dashboard/buyList/new" it is matched and rendered.Remove the extraneous Router
. Ensure you've specified the route paths from most specific to least specific. If ordered correctly there is absolutely no need for the exact
prop.
"/dashboard/buyList/new"
is more specific than "/dashboard/buyList${ids.id}"
is more specific than "/dashboard/buyList"
, etc..
Also, remove the path
prop from the 404 route so it can also be correctly matched and rendered in the case that no other routes above it match.
<Navbar />
<Switch>
<Route path='/dashboard/buyList/new' component={NewBuy} />
<Route path={`/dashboard/buyList${ids.id}`} component={BuyInfo} />
<Route path='/dashboard/buyList' component={BuyList} />
<Route path='/dashboard/showAddress' component={ShowAddress} />
<Route path='/dashboard/qrScanner' component={QrScanner} />
<Route path='/dashboard/productList' component={ProductList} />
<Route path='/dashboard/productListCode' component={ProductListCode} />
<Route path='/dashboard/deliveryScanner' component={DeliveryScanner} />
<Route path='/dashboard' component={DashboardDetail} />
<Route component={NotFound} />
</Switch>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.