[英]How to use ReactRouter CDN way without npm require?
I am new to React. 我是React的新手。 I am using it by directly adding the react.js and react-dom.js files along with browser.min.js for javascript transformation in to my HTML page for practice.
我正在使用它直接添加react.js和react-dom.js文件以及browser.min.js进行javascript转换到我的HTML页面进行练习。 Now, I want to use react-router for which I have added ReactRouter.js script file from here .
现在,我想使用react-router,我从这里添加了ReactRouter.js脚本文件。 However, I am not able to find any examples to know how to use it.
但是,我无法找到任何知道如何使用它的示例。 I have tried the following way and its not working:
我尝试了以下方式,但它不起作用:
<Router history={history}>
<Route path="/" component={MainComponent}>
//<Route path="topics/:id" compponent={Topic} />
</Route>
</Router>
ReactDOM.render(<Router />, document.getElementById('wrapper'));
Can you please help me how to use Router from ReactRouter.js (CDN way) with an example. 你能帮助我如何使用ReactRouter.js中的路由器(CDN方式)作为例子。 Thank you.
谢谢。
let Router = window.ReactRouter;
let RouteHandler = Router.RouteHandler;
let Route = Router.Route;
let DefaultRoute = Router.DefaultRoute;
Add these codes to the top of yours to get the true reference. 将这些代码添加到您的顶部以获得真正的参考。
I agree with jwong bee. 我同意jwong bee。
The following worked for me (I took it from http://programming.sereale.fr/ website): 以下对我有用(我从http://programming.sereale.fr/网站上获取):
(in plain javascript and jsx) (在普通的javascript和jsx中)
var ReactRouter = window.ReactRouter
var Router = ReactRouter.Router
var Route = ReactRouter.Route
var Link = ReactRouter.Link
var Redirect = ReactRouter.Redirect
var browserHistory = ReactRouter.browserHistory
var StaticRoute = React.createClass({
render: function() {
return (
<Router history={browserHistory}>
<Redirect from="/" to="/dashboard" />
<Route path="/" component={AppComponent}>
<Route path="/dashboard" component={DashboardComponent}></Route>
<Route path="/heroes-list" component={HeroesComponent}></Route>
<Route path="/hero-detail/:id" component={HeroDetailComponent} />
</Route>
</Router>
);
}
});
(in ES6 and jsx) (在ES6和jsx中)
let ReactRouter = window.ReactRouter
let Router = ReactRouter.Router
let Route = ReactRouter.Route
let Link = ReactRouter.Link
let Redirect = ReactRouter.Redirect
let browserHistory = ReactRouter.browserHistory
class StaticRoute extends React.Component {
render () {
return (
<Router history={browserHistory}>
<Redirect from="/" to="/dashboard" />
<Route path="/" component={AppComponent}>
<Route path="/dashboard" component={DashboardComponent}></Route>
<Route path="/heroes-list" component={HeroesComponent}></Route>
<Route path="/hero-detail/:id" component={HeroDetailComponent} />
</Route>
</Router>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.