完整代码:
成都网站建设哪家好,找创新互联!专注于网页设计、重庆网站建设公司、微信开发、小程序开发、集团企业网站建设等服务项目。核心团队均拥有互联网行业多年经验,服务众多知名企业客户;涵盖的客户类型包括:阳台护栏等众多领域,积累了大量丰富的经验,同时也获得了客户的一致称誉!
var React = require('react')
var ReactDom = require('react-dom')
var ReactRouter = require('react-router-dom')
var Router = ReactRouter.BrowserRouter
var Route = ReactRouter.Route
var Link = ReactRouter.Link
var browserHistory = ReactRouter.browserHistory
var CreateClass = require('create-react-class')
var PropTypes = require('prop-types')
var Index = CreateClass({
render:function(){
return (
<Router history={browserHistory}>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/docs">Docs</Link></li>
</ul>
<hr/>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/docs" component={Docs}/>
<Route path="/step1" component={Step1}/>
</div>
</Router>
)
}
})
var Home = CreateClass({
render:function(){
return(
<div>
<h3>Home</h3>
</div>
)
}
})
var About = CreateClass({
render:function(){
return(
<div>
<h3>About</h3>
</div>
)
}
})
var Docs = CreateClass({
render:function(){
return(
<div>
<ul>
<li><Link to="/step1">Step1</Link></li>
</ul>
<hr/>
<Route exact path="/step1" component={Step1}/>
</div>
)
}
})
var Step1 = CreateClass({
onClick:function(){
var history = this.props.history
history.push('/')
},
render:function(){
return(
<div>
<span onClick={this.onClick}>回到主页</span>
<h3>Step1</h3>
</div>
)
}
})
ReactDom.render((
<Index/>
), document.body)
var ReactRouter = require('react-router-dom')
var withRouter = ReactRouter.withRouter
b. 使用:
this.props.history.push("/")
c. 导出:
module.exports = withRouter(Login)
var Router = ReactRouter.HashRouter
b. 使用:
<Router>
<LocaleProvider locale={Cn}>
<div className="index_container">
<Head/>
<Route exact path="/" component={Home}/>
<Route path="/home" component={Home}/>
<Route path="/login" component={Login}/>
<Route path="/system" component={System}/>
<Route path="/user" component={User}/>
<Foot/>
<Write/>
</div>
</LocaleProvider>
</Router>
var Switch = ReactRouter.Switch
b. 定义:
<Switch>
<Route exact path="/some/path" component={XXX}/>
<Route path="*" component={Notfound}/>
</Switch>
新闻标题:react-router基本用法
URL地址:https://www.cdcxhl.com/article46/pdcoeg.html
成都网站建设公司_创新互联,为您提供网站排名、用户体验、App设计、企业网站制作、ChatGPT、搜索引擎优化
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联