React.js 路由

点击连接后，跳转过程中url发生变化，页面不实现跳转。这就是React.js路由，那么具体是怎么实现的呢，看代码：

首先是入口文件也就是index.js文件

1 import React from 'react';
2 import ReactDOM from 'react-dom';
3 import App from './App';
4 
5 ReactDOM.render(<App />, document.getElementById('root'));

在进行接下来的几步操作的时候，你需要先在src目录下面创建一个名为component的文件夹，里面的文件是路由文件。如下图所示

然后就是App.js文件了，看代码

import React from 'react';
import {HashRouter,Route,Link} from 'react-router-dom'
import Home from './component/Home'
import News from './component/News'
import About from './component/About'
//这是引入路由文件
 
class App extends React.Component{
    render(){
        return (
        <HashRouter>//HashRouter这个标签只能存在一个
                <h1>这是根目录</h1>
                <hr />
                <Link to="/home/left/11">首页</Link>&nbsp;&nbsp;
                <Link to="/news/center/12">新闻</Link>&nbsp;&nbsp;//这里的to是url地址
                <Link to="/about/right/13">关于我们</Link>&nbsp;&nbsp;
                <hr />
                <Route path="/home/:type/:id" component={Home}></Route>//这个path是把url的值传给component文件夹下的各个路由文件
                <Route path="/news/:type/:id" component={News}></Route>
                <Route path="/about/:type/:id" component={About}></Route>
        </HashRouter>
        )
    }
}
export default App//向外暴露

然后就是各个路由里面的内容了，其实各个路由里面的内容都是差不多的。看代码

import React from 'react'
class Home extends React.Component{
    constructor(props){
        super()
        this.state={
            p:props.match.params//这一步是把props.match.params封装给p有利于简化代码。
        }
    }
    render(){
        return(
            <React.Fragment>
                <h1>首页--{this.state.p.type}--{this.state.p.id}</h1>//这一步是通过接受App.js传过来的url值，并打印到页面上。
            </React.Fragment>
        )
    }
}
export default Home//向外暴露

接下来创建的news.js和About.js里面的内容和上面这一部分代码几乎一致。在此就不一一列出了。

以上是我对React.js的理解，如有不足，请指出。。。。