Javascript 反应路由器中的父子路由
我正在使用react路由器在我的应用程序中的组件之间进行路由。如何在应用程序本身之外为登录页创建路由?即,用户登陆页面,登陆页面路由到应用程序,然后应用程序可以相应地路由导航栏中的组件/视图 我遇到的问题是导航栏也在登录页中不断填充 以下是路线:Javascript 反应路由器中的父子路由,javascript,node.js,reactjs,react-router,Javascript,Node.js,Reactjs,React Router,我正在使用react路由器在我的应用程序中的组件之间进行路由。如何在应用程序本身之外为登录页创建路由?即,用户登陆页面,登陆页面路由到应用程序,然后应用程序可以相应地路由导航栏中的组件/视图 我遇到的问题是导航栏也在登录页中不断填充 以下是路线: // React var React = require("react"); var Router = require("react-router"); var Route = Router.Route; var NotFoundRoute = Rou
// React
var React = require("react");
var Router = require("react-router");
var Route = Router.Route;
var NotFoundRoute = Router.NotFoundRoute;
var DefaultRoute = Router.DefaultRoute;
var App = require('./components/App.js');
var About = require('./components/About.js');
var Concat = require('./components/Concat.js');
var Home = require('./components/Home.js');
var Landing = require('./components/Landing.js');
var Login = require('./components/Login.js');
var Search = require('./components/Search');
var Signup = require('./components/Signup');
var routes = (
<Route path="/" handler={App}>
<DefaultRoute handler={Landing} />
<Route name="about" handler={About}/>
<Route name="concat" handler={Concat}/>
<Route name="home" handler={Home}/>
<Route name="login" handler={Login}/>
<Route name="search" handler={Search}/>
<Route name="signup" handler={Signup}/>
</Route>
);
module.exports = routes;
//反应
var React=要求(“React”);
var路由器=要求(“反应路由器”);
var-Route=路由器.Route;
var NotFoundRoute=Router.NotFoundRoute;
var DefaultRoute=Router.DefaultRoute;
var-App=require('./components/App.js');
var About=require('./components/About.js');
var Concat=require('./components/Concat.js');
var Home=require('./components/Home.js');
var Landing=require('./components/Landing.js');
var Login=require('./components/Login.js');
var Search=require(“./components/Search”);
var Signup=require(“./components/Signup”);
变量路由=(
);
module.exports=路线;
这是App.js
var React = require('react');
var Navbar = require('./Navbar.js');
var Router = require('react-router');
var Landing = require('./Landing.js');
var RouteHandler = Router.RouteHandler;
var App = React.createClass({
render: function () {
return (
<div className="app-wrapper">
<Navbar />
<RouteHandler />
</div>
);
}
});
module.exports = App;
var React=require('React');
var Navbar=require('./Navbar.js');
var-Router=require('react-Router');
var Landing=require('./Landing.js');
var RouteHandler=Router.RouteHandler;
var App=React.createClass({
渲染:函数(){
返回(
);
}
});
module.exports=App;
这是导航栏:
var React = require('react');
var Router = require('react-router');
var Link = Router.Link;
var Navbar = React.createClass({
render: function () {
return (
<div className="navbar navbar-default navbar-static-top">
<div className="container">
<div className="navbar-header">
<button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span className="icon-bar">test</span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
</div>
<div className="collapse navbar-collapse">
<ul className="nav navbar-nav">
<li className="active"><Link to="home">Jobletics</Link></li>
<li><Link to="concat">Create a Listing</Link></li>
<li><Link to="search">Search Jobs</Link></li>
<li><Link to="about">About</Link></li>
</ul>
<ul className="nav navbar-nav navbar-right">
<li><Link to="login">Log in</Link></li>
<li><Link to="signup">Sign up</Link></li>
</ul>
</div>
</div>
</div>
);
}
});
module.exports = Navbar;
var React=require('React');
var-Router=require('react-Router');
var-Link=路由器.Link;
var Navbar=React.createClass({
渲染:函数(){
返回(
测验
职业体育
- 创建一个列表
- 找工作
- 关于
- 登录
- 报名
);
}
});
module.exports=导航栏;
有什么想法吗?在这种情况下,我会检查当前路线是否为着陆路线,然后相应地隐藏导航栏。您也可以重新构造路由或组件中的html,但如果只有一条路由是例外,我只会检查当前路由是否正在着陆。您可以尝试链接此
<BrowserRouter >
<Route push={true} path="/users/activation/:atoken" component={Activation}/>
</BrowserRouter>
您能提供一段代码片段或一个要查看的源代码吗