React Router persistant company in URL path and dynamic change - reactjs

Question

I'm trying to move from having current active companyId in query params to URL path.
http://localhost:3000/1?companyId=comp1
http://localhost:3000/2?companyId=comp1
To
http://localhost:3000/comp1/1
http://localhost:3000/comp1/2
So basically:
User Auth it's self in Login screen.
Then selects a company from list to work with / see data in Page1 and Page2
With specific company selected Page1 and Page2 should be loaded, and that company selected should continue to be in URL
http://localhost:3000/comp1/1
http://localhost:3000/comp1/2
Initial idea i had is to store selected company in state and then on state change change the basename but that does not work, i can't access Page*
Main App
import { Link, BrowserRouter as Router, Switch } from 'react-router-dom'
import { useStoreRoutes } from '../../states/useStoreRoutes'
import { PrivateRoutes } from './components/PrivateRoutes'
import { PublicRoutes } from './components/PublicRoutes'
export const ReactRouter = () => {
const currentOrg = useStoreRoutes((s) => s.currentOrg)
return (
<>
<Router basename={process.env.PUBLIC_URL + currentOrg}>
<div style={{ display: 'flex', gap: '10px' }}>
<Link to="/">Home</Link>
<Link to="/login">Login</Link>
<Link to="/compList">Comp List</Link>
<Link to="/1">Page 1</Link>
<Link to="/2">Page 2</Link>
</div>
<RoutesComp />
</Router>
</>
)
}
const RoutesComp = () => {
return (
<Switch>
<PrivateRoutes component={Page1} path="/1" />
<PrivateRoutes component={Page2} path="/2" />
<PublicRoutes component={Login} path="/login" />
<PublicRoutes component={CompList} path="/compList" />
<PublicRoutes component={Home} path="/" />
</Switch>
)
}
const Home = () => <h2>Home</h2>
const Login = () => <h2>Login</h2>
const CompList = () => {
const currentOrgSet = useStoreRoutes((s) => s.currentOrgSet)
return (
<h2>
<Link to="/comp1" onClick={() => currentOrgSet('comp1')}>
Comp1
</Link>
<Link to="/comp2" onClick={() => currentOrgSet('comp2')}>
Comp2
</Link>
</h2>
)
}
const Page1 = () => <h2>Page 1</h2>
const Page2 = () => <h2>Page 2</h2>
State
import create from 'zustand'
export const useStoreRoutes = create((set: any) => {
return {
currentOrg: '',
currentOrgSet: (data: string) => set({ currentOrg: data }),
}
})
PrivateRoutes
import { Redirect, Route, RouteProps } from 'react-router-dom'
export const db = [
{
companyId: 'comp1',
},
{
companyId: 'comp2',
},
{
companyId: 'comp3',
},
]
export const PrivateRoutes = ({ component: Component, ...rest }: any) => {
const getCompId = window.location.pathname.split('/')[1]
const checkIfCompIsInUser = () => {
for (let i = 0; i < db.length; i++) {
const el = db[i]
if (el.companyId === getCompId) {
console.log(true)
return true
} else {
console.log(false)
return false
}
}
}
return (
<Route
render={(props: any) =>
checkIfCompIsInUser() ? (
<Component {...props} />
) : (
<Redirect to={{ pathname: '/login', state: { from: props.location } }} />
)
}
{...rest}
/>
)
}
PublicRoute
import { Route, RouteProps } from 'react-router-dom'
export const PublicRoutes = ({ component: Component, ...rest }: any) => {
return <Route {...rest} render={(props: any) => <Component {...props} />} />
}

Answer 1

From what I can tell, you need to declare the Page1 and Page2 routes to use a dynamic path that includes the companyId.
const RoutesComp = () => {
return (
<Switch>
<PrivateRoutes component={Page1} path="/:companyId/1" />
<PrivateRoutes component={Page2} path="/:companyId/2" />
<PublicRoutes component={Login} path="/login" />
<PublicRoutes component={CompList} path="/compList" />
<PublicRoutes component={Home} path="/" />
</Switch>
);
};
From here you can fix the PrivateRoutes custom route component to read the route match params for checking access.
export const PrivateRoutes = ({ component: Component, ...rest }: any) => {
return (
<Route
render={(props: any) => {
const { companyId } = props.match.params;
const checkIfCompIsInUser = () => {
return db.some((el) => el.companyId === companyId);
};
return checkIfCompIsInUser() ? (
<Component {...props} />
) : (
<Redirect
to={{ pathname: "/login", state: { from: props.location } }}
/>
);
}}
{...rest}
/>
);
};
Example CompanyList to render links to each company's page 1 and 2.
const CompList = () => {
return (
<ul>
<li>
<Link to="/comp1/1">Comp1</Link>
</li>
<li>
<Link to="/comp1/2">Comp2</Link>
</li>
<li>
<Link to="/comp2/1">Comp1</Link>
</li>
<li>
<Link to="/comp2/2">Comp2</Link>
</li>
</ul>
);
};