How to route exact string in reactJS

Question

Am trying to configure two routes in my application ... one for product page and the other for search results, I tried to do as follow

 <Router>
          <Switch>
            <Route exact path="/" component={Home} />
            <Template>
              <Route exact path="/search" component={SearchResult} />
              <Route path="/:id" component={PropertyTemplate} />
            </Template>
          </Switch>
        </Router>

Template

class Template extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          property: null
        }

      }

      render() {

        return (
          <div>
            {/* HEADER */}
            <Header></Header>
            {/* HEADER */}
            {/* LEFT SIDE */}
            <LeftSide></LeftSide>
            {/* LEFT SIDE */}
            <div id="wrapper">
              {this.props.children}
            </div>

          </div >
        )

      }
    }


    export default Template;

but it's not working, both components of /search and /:id are executed

note : id is alphanumeric

By "/search is matched also in /:id" what do you mean? Are both components rendered? — cbr
– cbr, Commented Feb 8, 2020 at 22:19
You might want to move your Switch component (or have another one) wrapping your two innermost Routes — Chris
– Chris, Commented Feb 8, 2020 at 22:32

Chris · Accepted Answer · 2020-02-08 22:39:33Z

2

You might want to move your Switch component (or have another one) wrapping your two innermost Routes.

<Router>
  <Switch>
    <Route exact path="/" component={Home} />
      <Template>
        <Switch>
          <Route exact path="/search" component={SearchResult} />
          <Route path="/:id" component={PropertyTemplate} />
        </Switch>
      </Template>
    </Switch>
  </Router>

answered Feb 8, 2020 at 22:39

Chris

59.7k20 gold badges121 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to route exact string in reactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related