React学习(二)：React-router学习笔记

React-router学习笔记

简单实例

1. create-react-app name

   创建React脚手架，方便简单应用。

2. 设想简单页面，左侧为导航，右侧是网页的头部、内容区域、尾部。

   

3. src目录如下

   • components // 放置组件
   • css // 放置css文件
   • routers // 放置router配置文件
   • views // 放置页面文件
     • content
     • layout
     • login
   • App.js // 网页整体框架
   • index.js

   ……

4. 开始动手～每次敲代码的时候总觉得不知道从哪里开始，大概还是敲得不够多吧？

   首先是将布局写好，通过flex布局将整体结构写好。

   [外链图片转存失败(img-e46A2Li3-1562136202068)(https://s2.ax1x.com/2019/07/03/ZYDdwq.png)]

其次，在index.js中添加最外层的路由<BrowserRouter>，它的原理是使用HTML5 history API（pushState，replaceState、popState）来使你的内容随着url动态改变。

⚠️PS：

HashRouter和BrowserRouter这两个是路由的基本，必须将他们包裹在最外层，但只需要根据自己的需要选择其一就可以了。HashRouter主要是通过hash值对路由进行控制。

// index.js 主要代码
ReactDOM.render(
    <BrowserRouter>
        <Switch>
            {
                indexRouter.map((route) => {
                    return <Route key={ route.path } path={ route.path } exact={route.exact || false} component={route.component} />
                })
            }
        </Switch>
        {/* <App /> */}
    </BrowserRouter>, 
    document.getElementById('root')
);