score:7

Accepted answer

For react-router < 4.0

If you want to display an error page and not change the path

<Route path='*' exact={true} component={errorcomponent} />

If you want to display an error page and change the path

<Route path='/error' component={errorcomponent} />
 // use redirect to  change the Url
<Redirect from='*' to='/error' />

For react-router 4

Keep the path

<Switch>
    <Route exact path="/" component={component} />
    <Route component={errorcomponent} />
 </Switch>

change Url.

 <Switch>
    <Route path="/comp" component={component} />
   <Redirect to="/error" />
 </Switch>

the redirect tag has to be put whereever you place a route tag insde a switch.

score:1

You can use this

<Route exact insecure component={NotFound} />

score:1

The problem is that in the URL http://localhost:8080/#/non-existent-url, the route is just /, which is why it is hitting your app component. The intent of the # in a standard URL means go to a location within a page. So your url is saying "go to the / page and go to this specific location once you've loaded the page".

From a routing perspective, / is your route, so it is found. Honestly, if you aren't doing the 5 year old hash-bang style of routing, this is behaving as intended. In that case (if you are stuck with people bookmarked to those kinds of pages or something) to force something like that to be "not found", I would institute URL re-writing.

SPA apps already rewrite incoming URLs on the server so they are all directed at a single page. Add a rule that as part of the rewrite, it removes the # (if you don't use it in your app).

So, http://localhost:8080/#/non-existent-url would internally be processed by the app as http://localhost:8080/non-existent-url.

score:1

you should Router component as parent of your Routes and add this Route

<Route path='*' component={() => NotFound} />

const routes = (
    <Router>
        <div>
            <Route path="/" component={App} onEnter={willTransitionTo}
            <IndexRoute component={DashboardContainer}/>
            <Route path="/auth/:data" component={Auth}/>
            <Route path="/dashboard" component={DashboardContainer}/>

            <Route path='*' component={() => NotFound} />
        </div>
    </Router>
);

score:2

Based on what I'm seeing in your code, trying to switch between hash history and browser history just isn't going to work. The moment you hit '/#' in anything it's going to break and always hit your generic '/' route.

Hash URLs are an older way of handling things that shouldn't be an issue anymore. See this SO question and its accepted answer for more details.

Doing links like Twitter, Hash-Bang #! URL's

So yeah, unless you have some crazy reason to still support hashes in URLs, drop hash history and simply use browser history. Then your routes as defined in your provided code sample should work.

score:2

You can access the location.hash value and set it to blank.

But as already well described, this is standard http for years and you shouldn't care except for a good reason.

You can see it like http://localhost:8080/?non-existent-url it means go to / with path parameter non-existent-url do you want to redirect too ?

score:2

There are few unsafe characters which should be avoided while creating URL one of them is #.

The character “#” is unsafe and should always be encoded because it is used in World Wide Web and in other systems to delimit a URL from a fragment/anchor identifier that might follow it.

Server while resolving the route will pass the string before # to get the page requested and then it will be moved the exact fragment of page if anything specifed using the string after # till any unsafe character.

So, In your string before # is empty that's why it redirect to / which is a valid route and it redirect to component App. And since no fragment is defined that's why nothing happening.

To make this works we need to tell nginx or any other server to strip down all the # before sending request forward.

In that case,

http://localhost:8080/#/non-existent-url

will be converted to,

http://localhost:8080/non-existent-url

Which will solve the issue. See this link to see How to rewrite rule in nginx


Related Query

More Query from same tag