CODEWITHSUNDEEP
reactjsreact-router
Homayoun Behzadian
Homayoun Behzadian

Reputation: 1163

React Routers are correct but does not work as expected

I have a React App with below entery:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Start from './Portal/Membership/Anonymous/Start';
import Register from './Portal/Membership/Anonymous/Register';
import NoMatch from './Portal/Membership/Anonymous/NoMatch';


const App = () => (
    <div className="App" style={{ height: "100vh" }}>
        <Router>
            <div>
                <Switch>
                    <Route exact path="/" component={Start} />
                    <Route exact path="/Register" Component={Register} />
                    <Route component={NoMatch} />
                </Switch>
            </div>
        </Router>
    </div>
);

export default App;

Only path / works but if I open /Start page will render empty nothing at all even NoMatch. If I navigate to incorrect url, NoMatch will render.

If I change default component to Register, Register component will render in / location

Upvotes: 0

Views: 28

Answers (2)

Kevin Wang
Kevin Wang

Reputation: 682

Bug:

You currently only have routes / & /Register defined.

Fix:

You need to declare a route, /Start:

<Route path="/Start" component={Start} />

Example:

<Switch>
  <Route exact path="/" component={Start} />
  <Route path="/Start" component={Start} />
  <Route path="/Register" component={Register} />
  <Route component={NoMatch} />
</Switch>

Upvotes: 0

Homayoun Behzadian
Homayoun Behzadian

Reputation: 1163

I searched all of web and read all React Router documentation and did not find anything until I accidentally copy and paste one line of routers and find that there are difference between Component and component!!

I wonder why react did not recognize Component attribute (with capital c) and did not throw an exception when none of component, render and children defined!

Remember if you write something like <SomeComponent someBooleanAttribute="true" /> React will warn you with message although true works here but you must write someBooleanAttribute={true} because someBooleanAttribute="false" will be recognized as true but NO any warning or error will be shown to developer for this more important problem!

Upvotes: 1

Related Questions