Question 216992 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to use multiple paths on the same page?

I have a component in which I want to create an object or to edit an object, basically I have the same path, it only depends if it got an id or not, but lately the react-router-dom doesn’t allow me to give an array of strings as a parameter. How can I achieve the same result?

  return (
    <>
      <NavBar />
      <Container style={{marginTop: '7em'}}>
        <Routes>
          <Route path='/' Component={HomePage}/>                
          <Route path='/arenas' Component={ArenaDashboard}/>    
          <Route path='/arenas/:id' Component={ArenaDetails}/>    
          <Route path={['/createArena', '/manage/:id']} Component={ArenaForm} />    
        </Routes>
      </Container>
    </>
  );
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found how to do it:

    return (
    <>
      <NavBar />
      <Container style={{marginTop: '7em'}}>
        <Routes>
          <Route path='/' Component={HomePage}/>               
          <Route path='/arenas' Component={ArenaDashboard}/>    
          <Route path='/arenas/:id' Component={ArenaDetails}/>    
          {['/createArena', '/manage/:id'].map((path) => (
            <Route path={path} element={<ArenaForm />} />
          ))} 
        </Routes>
      </Container>
    </>
  );```

  2. 0

    You may explicitly define it as:

    return (
    <>
      <NavBar />
      <Container style={{marginTop: '7em'}}>
        <Routes>
          <Route path='/' Component={HomePage}/>                
          <Route path='/arenas' Component={ArenaDashboard}/>    
          <Route path='/arenas/:id' Component={ArenaDetails}/>    
          <Route path='/createArena' Component={ArenaForm} />
          <Route path='/manage/:id' Component={ArenaForm} />     
        </Routes>
      </Container>
    </>
  );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search