react-router基本用法

发布时间：2020-07-24 13:18:03 作者：Lee_吉
来源：网络阅读：1707

说明：
a. 引入模块：

b. 定义路径和链接：

c. 定义子路径：

d. 定义单击跳转事件：

完整代码：

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)

效果：
a. 主页：

b. 父页面：

c. 子页面：

d. 点击回到主页：

手动控制跳转：
a. 引入组件：

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

react-router基本用法
b. 使用：

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

react-router基本用法
c. 导出：

module.exports = withRouter(Login)

react-router基本用法

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

var Router = ReactRouter.HashRouter

react-router基本用法
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>

react-router基本用法

404页面：
a. 引入：

var Switch = ReactRouter.Switch

b. 定义：

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

react-router基本用法

相关阅读