Question

我正在尝试使用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路由。

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

React Router显示没有路由匹配路径，即使路由存在

1 个答案: