react-router基本用法

2024-12-07 技术教程

说明：
a. 引入模块：

b. 定义路径和链接：

c. 定义子路径：

d. 定义单击跳转事件：

完整代码：

var React = require('react')var ReactDom = require('react-dom')var ReactRouter = require('react-router-dom')var Router = ReactRouter.BrowserRoutervar Route = ReactRouter.Routevar Link = ReactRouter.Linkvar browserHistory = ReactRouter.browserHistoryvar 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)效果：
a. 主页：

b. 父页面：

c. 子页面：

d. 点击回到主页：
手动控制跳转：
a. 引入组件：

var ReactRouter = require('react-router-dom')var withRouter = ReactRouter.withRouter

b. 使用：

this.props.history.push("/")

c. 导出：

module.exports = withRouter(Login)

使用hash路由（使代码打包后可以在本地运行）：
a. 引入模块：

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>

404页面：
a. 引入：

var Switch = ReactRouter.Switch

b. 定义：

<Switch><Route exact path="/some/path" component={XXX}/><Route path="*" component={Notfound}/></Switch>