0

我正在尝试使用 react-router 为我的页面创建路由，但我总是收到以下错误

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

这就是我的代码的样子

    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'));
});

这对我来说很有效，我发布它以防万一有人遇到同样的问题

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'));
});

还要在后端设置 url 路由。

4

1 回答 1

1

您需要设置路线的路径。目前您的所有路线都映射到'/'

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>
);

您还需要将组件添加到您的应用程序中，以便您的子路由可以替换为它。

var App = React.createClass({
    render:function() {
        return(<div>
           <Router.RouteHandler/>
        </div>);
    }
});
于 2015-03-26T15:14:21.887 回答