React Router 显示没有路由匹配路径,即使路由存在
React Router showing No route matches path even though route exists
我正在尝试使用 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 路由。
您需要设置路线的路径。目前您所有的路线都映射到 '/'
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>
);
您还需要在您的App中添加The Component,以便您的子路由可以被它替换。
var App = React.createClass({
render:function() {
return(<div>
<Router.RouteHandler/>
</div>);
}
});
我正在尝试使用 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 路由。
您需要设置路线的路径。目前您所有的路线都映射到 '/'
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>
);
您还需要在您的App中添加The Component,以便您的子路由可以被它替换。
var App = React.createClass({
render:function() {
return(<div>
<Router.RouteHandler/>
</div>);
}
});