Exclude path from react-router <Router/>

Question

See I'm trying to setup a react-router app. I have /parties, the list of all parties and then I have /parties/:id which give me a detail page of a party and /parties/create where I have a form to create a party.

Now, I'm trying to have my main resource always on the left side of my screen and my sub-resource always on the right side of my screen.

This is how I set it up:

        return <div>
      <div>
        <nav>
          <h1>Gamevote</h1>
          <AuthWidget authService={this.authService}/>
        </nav>
        <div class="content cnt" ref={this.content}>
          <this.PrivateRoute path="/" exact component={() => <Redirect to="/parties"/>} />
          <Route path="/register" exact component={() => <Register/>} />
          <Route path="/login" exact component={() => <Login authService={this.authService}/>} />
          <this.PrivateRoute path="/parties/:selectedParty?" component={this.AutowiredPartyList} />
        </div>
        <div class="big-content cnt" ref={this.bigContent}>
            <this.PrivateRoute path="/party/create" partyService={this.partyService} exact component={() => <this.AutowiredCreateParty/>}/>
            <this.PrivateRoute path="/parties/:party" exact component={PartyView}/>
         </div>
         <this.PrivateRoute path="/logout" exact component={this.Logout}/>
      </div>
    </div>
  }

But now when I go to /parties/create a create party form and a party detail with id party show up.

Is there a way to exclude /parties/create from the match /parties/:id ?

Is it parties/create or party/create? Something that may be happening is order of your routes. — Ion
– Ion, Commented Jul 9, 2019 at 21:58

Hasan Patel · Accepted Answer · 2019-07-09 22:31:13Z

If you want to have both /parties/create and /parties/:id change the order:

path="/parties/create" (first)

path="/parties/:id" (last)

If another path with /parties/:something? exists before it will enter this route.

Thats because "/parties/:id" matches anything after /parties/##### Also note you will have to add the Switch component so only one path is rendered at time.

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";

function Index() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About create</h2>;
}

function AboutId() {
  return <h2>About with ID</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

function AppRouter() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/users/">Users</Link>
            </li>
            <li>
              <Link to="/about/create">About</Link>
            </li>
            <li>
              <Link to="/about/1">About with id</Link>
            </li>
          </ul>
        </nav>
        <Switch>
          <Route path="/" exact component={Index} />
          <Route path="/users/" component={Users} />
          <Route path="/about/create" component={About} />
          <Route path="/about/:id" component={AboutId} />
        </Switch>
      </div>
    </Router>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<AppRouter />, rootElement);

https://codesandbox.io/s/withered-lake-o9kx4

TacoEater · Accepted Answer · 2023-05-25 02:32:23Z

0

The best way to exclude a route is by using a switch and an empty route for the one you want to exclude. E.g: if you want to hide the button when settings/users route is selected you can do this:

<Switch>
  <Route path="/settings"/>
  <Route path="/:dashboard/:param">
    <Button />
  </Route>
</Switch>

answered May 25, 2023 at 2:32

TacoEater

2,29821 silver badges22 bronze badges

Collectives™ on Stack Overflow

Exclude path from react-router <Router/>

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related