react-router render menu when path does not match

react-router no match
react-router switch default route
react router match
react router menu
react-router wildcard
react-router fallback route
react-router default route
react-router-config

I'm using react-router and I want to render a menu component when the user is not in the root and not in the /login path. This is what I have so far

        <Route path="/:subpath" component={TopMenuComponent} />
        <div>
            <Route
                exact path="/"
                render={props => (
                    <LoginContainer {...props} setTitle={this.setTitle} />
                )}
            />               
            <Route path='/landing' component={LandingComponent} />
        </div>

takes care of not rendering the TopMenuComponent component in the '/' location, however how do I avoid it rendering TopMenuComponent when the user is in the /login path? I could always create another component and wrap it up, but I think that is too much just for this.

React Router's matching of path strings relies on path-to-regexp@^1.7.0.

As a result, you can instruct routes to not render for certain paths using regular expressions.

The following implementation renders at all paths, bar "/" and "/login":

<Route path="^(?!.*(/|/login)).*$" component={TopMenuComponent}/>

react-router render menu when path does not match, I'm using react-router and I want to render a menu component when the user is not in the root and not in the /login path. This is what I have so far <Route  terencechow changed the title Match does not work without paths react-router-config does not match on later paths even if there is an exact path match later Aug 11, 2017 This comment has been minimized.

Regex in the route path didn't work for me. What worked for me was this. Just add the other condition.

 <Route render={({ location }) => {
     return location.pathname.indexOf('/login') === -1 ? TopMenuComponent : null 
  }} />

No Match 404 route render on all routes: react-router-dom · Issue , Using same example from react-router-dom. No Match 404 should be rendered if specified route doesn't match, it i. <Route path="*> always matches export function RouterNavigation() { return ( <> <Route exact path="/">  Setup Routes. Our route code below our links will use a Switch to only render the first item that it matches. Our main Route will be our /profile that we'll render without an ID, we must use the exact prop to tell it to only match it's path exactly, otherwise it would match for all routes that even have an ID.

If you don't wish to use Regular Expressions directly, you can place your login Route in a Switch with the top menu component Route. It will only run the first matching Route and routes without a path attribute match anything.

<div>
    <Switch>
      <Route
          exact path="/"
          render={props => (
              <LoginContainer {...props} setTitle={this.setTitle} />
          )}
      />
      <Route path="/:subpath" component={TopMenuComponent} />
    </Switch>           
    <Route path='/landing' component={LandingComponent} />
</div>

For your example, you would need to reorder your divs.

Feature Request: Only render a route when the path doesn't match , I've found that there are some cases where I want to render Just use a Switch: https://reacttraining.com/react-router/web/example/no-match  You will find this article useful if you are looking for a quick primer on the new patterns of React Router. But before we look at hooks, we will start off with a new route rendering pattern. Before React Router 5 // When you wanted to render the route and get router props for component <Route path="/" component={Home} />

Taken Regex from Arman's answer.

const notInLogin = /^(?!.*(\/login)).*$/

export default () => (
  <Router history={history}>
    <>
      <Route path={notInLogin} component={NavBar} />
      <Switch>
        <Route exact path="/login" component={Login} />
        <Route exact path="/accounts" component={Account} />
        <Route exact path="/profile" component={Profile} />
        <Route exact path="/" component={Home} />
      </Switch>
    </>
  </Router>
)

If you get PropsType error: https://stackoverflow.com/a/50439120/1099314

Handling 404 pages (catch all routes) with React Router v4, To see how this works, let's first render a navbar with the following paths - / , /will-​match , /will-not-match , and /also/will/not/match . import React  This is because React Router will check if the path defined starts with /. If that's the case, it will render the component. And here, our first route starts with /, so the Home component will be rendered each time. However, we can still change the default behavior by adding the exact property to Route. In App.js, add:

Similar to taylor michels answer, but the following accounts for both the '/login' and the '/' (root) routes:

<Route
   render={({ location }) =>
     location.pathname !== "/" && location.pathname !== "/login" ? (
       <TopMenuComponent />
     ) : null
   }
 />>

This also renders the component as a jsx tag <TopMenuComponent />, which works for me where the other approach did not.

Ambiguous Matches with React Router v4, The issue you're running into is that every time you navigate to /notifications , not only does the Notifications component render, but so does the  React Router is the de-facto React routing library, and it’s one of the most popular projects built on top of React. React at its core is a very simple library, and it does not dictate anything about routing. Routing in a Single Page Application is the way to introduce some features to navigating the app through links,

Use matchPath to Match Nested Route Paths in Parent Routes with , Use matchPath to Match Nested Route Paths in Parent Routes with React-Router We can use the internal mechanisms of React Router to match any route we want. We will render the profileId you're viewing, but when we receive loading prop that is true we'll render a loading message. No we'll setup our links. React.PureComponent is part of the React core and React Router does not work with it unless React Router specific hack is added to it. That's not good tradeoff in my opinion. That's not good tradeoff in my opinion.

React Router v5.1, This app works best with JavaScript enabled. Skip to content. ▾ Menu Today, we are releasing React Router version 5.1. Using the `render` prop */} <Route path="/posts/:slug" render={({ match } ReactDOM.render( <Router> <div> <​Switch> {/* No weird props here, just use regular `children` elements! Deprecate <Route exact>, match path exactly by default #4958. both routes render. Of course, there's a logical explanation for why they do, but I think it would

The Hitchhiker's Guide to React Router v4: [match, location, history , The Hitchhiker's Guide to React Router v4: [match, location, history] — your best What happens is that the Router doesn't know the full path to the Maybe you want to trick a Component to render in a different location than  You can use the wrapper option to wrap a MemoryRouter around the component you want to render (MemoryRouter works when you don't need access to the history object itself in the test, but just need the components to be able to render and navigate).

Comments
  • You could try a embedding your TopMenuComponent within a ternary operator that only shows it when the path does not equal '/' or '/login'.
  • but this is too much, upon further reading I found the following reacttraining.com/react-router/web/api/Route/path-string, so I need something which path-to-regexp understands
  • Even better. Try: ^(?!.*(/|/login)).*$
  • For me passing a regex with negative look-aheads did not work if I tried to pass it as a string, but does work if I pass it as a RegExp object like this: <Route path={ new RegExp("^(?!.*(/|/login)).*$") } component={TopMenuComponent}/>
  • Neither this nor @vladvlad's solution is possible. See this answer for more detail: stackoverflow.com/a/44516325/1058033
  • path: string | string[] - "Any valid URL path or array of paths that path-to-regexp@^1.7.0 understands" @vladvlad @vitaliygorbenko
  • Same... required JSX <TopMenuComponent/>