CODEWITHSUNDEEP
reactjsreact-router
Bazinga777
Bazinga777

Reputation: 5281

React Router showing No route matches path even though route exists

I am trying to use react-router to create routes for my pages, but I am always getting the following error 

**Warning: No route matches path "/profile/". Make sure you have <Route path="/profile/"> somewhere in your routes app.js:34**

This is what my code looks like 

    var React  = require('react');
var Router  = require('react-router');
var Home = require('./home.js');
var ChallengesPage = require('./challengespage.js');
var ProfilePage = require('./profilepage.js');
var LoggedInPage = require('./loggedinpage.js');


var Route = Router.Route;
var RouteHandler = Router.RouteHandler;
var DefaultRoute = Router.DefaultRoute;
var RouteHandler = Router.RouteHandler;

var App = React.createClass({
    render:function() {
        return(<div>

        </div>);
    }
});

var routes = (
              <Route handler={App} path="/">    
                <DefaultRoute handler={Home} />
                <Route   name="profile"  handler={LoggedInPage} />    
                <Route   name="dashboard"  handler={ProfilePage} />    
                <Route   name="challenges"  handler={ChallengesPage} />    
              </Route>
);


Router.run(routes,  function (Handler) {
  React.render(<Handler/>, document.getElementById('app'));
});

This is what worked out for me, I am posting it just in case someone faces the same problem 

var Route = Router.Route;
var RouteHandler = Router.RouteHandler;
var DefaultRoute = Router.DefaultRoute;
var RouteHandler = Router.RouteHandler;

var App = React.createClass({
    render:function() {
        return(<div>
        <RouteHandler/> 
        </div>);
    }
});

var routes = (
              <Route handler={App} path="/">    
                <DefaultRoute handler={Home} />
                <Route path="loggedin/"  name="loggedin"  handler={LoggedInPage} />    
                <Route path="dashboard/"  name="dashboard"  handler={ProfilePage} />    
                <Route path="challenges/"  name="challenges"  handler={ChallengesPage} />    
              </Route>
);


Router.run(routes, Router.HistoryLocation,  function (Handler) {
  React.render(<Handler/>, document.getElementById('app'));
});

Also set the url routes in the backend as well.

Upvotes: 0

Views: 4235

Answers (1)

Safari
Safari

Reputation: 3382

you need to set the path of your routes. Currently all your routes are mapped to '/'

var routes = (
      <Route handler={App} path="/">    
          <DefaultRoute handler={Home} />
          <Route path="/profile/"  name="profile"  handler={LoggedInPage} />    
          <Route path="/dashboard/"  name="dashboard"  handler={ProfilePage} />    
          <Route path="/challenges/" name="challenges"  handler={ChallengesPage} />    
      </Route>
);

You also need to add The Component into your App, so that the your child routes can be replaced with it.

var App = React.createClass({
    render:function() {
        return(<div>
           <Router.RouteHandler/>
        </div>);
    }
});

Upvotes: 1

Related Questions