NavLink exact prop not working for react-router-dom 6

Question

I am currently using

    "react-router": "^6.0.0-beta.0",
    "react-router-dom": "^6.0.0-beta.0",

The problem with NavLink of react-router-dom that i am facing now is that the root path "/" is always active, other paths are of no problem and they are being active and inactive during toggle, its just the root path that is giving me trouble, i have searched and tried many solutions. but nothing worked. Use "exact" and "exact={true}" both, but no success.

Used this:

<NavLink
          className="iconContainer"
          exact={true}
          to="/"
          activeClassName="isActive"
        >
          <span className="menu-title">Home</span>
        </NavLink>

and Also this:

<NavLink
          className="iconContainer"
          exact
          to="/"
          activeClassName="isActive"
        >
          <span className="menu-title">Home</span>
        </NavLink>

I have been stuck in this situation for past two days, and still no success in finding any solution. Any help will be appreciated, thanks

Edit: My routes

<Routes>
 
                <Route
                    exact
                    path="order/:orderId"
                    element={<OrderDetails />}
                ></Route>
                <Route
                    exact
                    path="orders"
                    element={<Orders />}
                ></Route>
                <Route
                    exact
                    path="/"
                    element={<Home />}
                ></Route>

                
      </Routes>

Answer 1

In 6.0.2 you can pass a function to className and that function gets a set of props. One of those props is "isActive". Here is how I solved it for the OP code:

<NavLink
    className={(props) => {
      return `${props.isActive ? 'isActive ' : ''}iconContainer`;
    }}
    end
    to="/"
  >
    <span className="menu-title">Home</span>
</NavLink>

Also note that the class "active" is automatically set by the NavLink.

Also note the use of end: "If the end prop is used, it will ensure this component isn't matched as "active" when its descendant paths are matched. For example, to render a link that is only active at the website root and not any other URLs"

Answer 2

You can grab a sequence of digits at the end of each string in the id column, then covert them integers and reassign to the id column.

df['id'] = df.id.str.extract(r'(\d+)$').astype(int)

Answer 3

I hope that below code is OK. It removes all alpha characters. You can extend it to special chars.

import pandas as pd
data = {'time': [0, 1, 2, 3, 4], 'id': ["bike0", "biKe10", "veh0", "veh10", "moto100"]}  
df = pd.DataFrame(data)
df["id"] = df["id"].str.replace(r"[a-z]","", case=False)
print(df)