How to properly manage routes with react-router-dom?-CodePudding

I've had a problem with redirecting to page via react routing. I want all my private paths to start with /client/:id and then add another part to this path when I'clicking onto dashboard menu. Finall path should be something like this: /client/:id/home.

So, i start to coding and change my object handling all paths like this:

export const routes = {
    home: "/client/:id/home"
}

and handling componenet object like this:

export const routing = [
    { path: routes.home, component: Home }
]

all of this i use in my App.tsx like below:

{routing.map(({ path, component }, i) => (
   <Route key={i} path={path} component={component} />
))}

And right now I've got a problem. After redirecting to home with using react-router-dom history like below:

const history = useHistory();
history.push(`/client/${id}/home`)

router redirect me onto 404 page :(

Can someone tell me what i'm doing wrong?

Thanks for any help!

CodePudding user response：

Thank you for the question. For routing the basic principle is same in case of React, Angular, Vue. Using typescript or JavaScript. When navigating we do not need to useHistory and push history in it. You can use nested routing here and achieve the same. export const routes = { home: "/client/:id/home" } Please find attached example.

[https://codepen.io/shwetas7/pen/rNGRNdW][1]

CodePudding user response：

This is an example with the functionality that you need. You have to use history.go(); after history.push to reload the page.

/*
Question: How to properly manage routes with react-router-dom?
Url: https://stackoverflow.com/questions/70730898/how-to-properly-manage-routes-with-react-router-dom/70731195#70731195
 */

import { Redirect, Route, Router, Switch, useParams } from 'react-router-dom';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

function Route2({ history, match }) {
  // id = 1
  // const { id } = match.params;
  const { id } = useParams();
  return (
    <>
      <div>Route 2</div>
      <button onClick={() => {
        history.push("/");
        history.go();
      }}> navigate to Route 1</button>
    </>
  );
}

function Question4() {
  return (
    <>
      <Router history={history}>
        <Switch>
          <Route
            path="/client/:id/home"
            exact
            render={(props) => <Route2 {...props} />}
          />
          <Route
            path="/"
            render={({ history }) => {
              return (
                <>
                  <div>Route 1</div>
                  <button onClick={() => {
                    // history.push("/client/1/home");
                    // history.go();
                    window.location.href = '/client/1/home'
                  }}> navigate to Home</button>
                </>
              )
            }}
          />
          <Redirect path="/" />
        </Switch>
      </Router>
    </>
  );
}

export default Question4;

I hope I've helped you