天天看点

关于react router 4 实践

详细代码栗子: https://github.com/wayaha/react-dom-CY

(如果对您有帮助,请你帮我点颗star)

clone然后

npm install
npm start      

分割线

1、这个项目使用create-react-app搭建;

  首先需要安装好create-react-app

npm install -g create-react-app      

  安装完毕之后就是搭建项目;

create-react-app your-project-name
cd your-project-name
npm start      

  安装完成之后,会自动打开localhost:3000;打开create-react-app自带的一个简单dom。

  **  另外,create-react-app默认配置样式使用的.css文件,习惯使用.scss的大佬可以在config文件下的 webpack.config.dev.js 和 webpack.config.prod.js 中rules数组中添加下面配置即可;

{
    test:/\.scss$/,
    loaders:['style-loader', 'css-loader', 'sass-loader']
}      

2、关于相关安装包的下载

  React Router被拆分成三个包:

react-router

,

react-router-dom

react-router-native

react-router

提供核心的路由组件与函数。其余两个则提供运行环境(即浏览器与react-native)所需的特定组件。

  进行网站(将会运行在浏览器环境中)构建,我们应当安装

react-router-dom

react-router-dom

暴露出

react-router

中暴露的对象与方法,因此你只需要安装并引用

react-router-dom

即可。

npm install --save react-router-dom      

3、开始项目代码

  代码结构如下:

 

关于react router 4 实践

  (1)、路由类型的选择

    在你开始项目前,你需要决定你使用的路由的类型。对于网页项目,存在

<BrowserRouter>

<HashRouter>

两种组件。当存在服务区来管理动态请求时,需要使用<BrowserRouter>组件,而<HashRouter>被用于静态网站。

    通常,我们更倾向选择<BrowserRouter>,但如果你的网站仅用来呈现静态文件,那么<HashRouter>将会是一个好选择。

    从效果上来看,

<BrowserRouter>

<HashRouter>在url中少了一个#,需要注意的是,没有#的路由切换前后对服务端来说是不同的url,。在我们的Dome中可以试一下,代码在index.js如下:

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import {
    // BrowserRouter,
    HashRouter
} from 'react-router-dom';
import { Provider } from 'react-redux';
import reducer from './redux';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

const store = createStore(reducer);

ReactDOM.render(
    <Provider store={store}>
        {/* <BrowserRouter> */}
        <HashRouter>
            <App />
        </HashRouter>
        {/* </BrowserRouter> */}
    </Provider>,
    document.getElementById('root')
);
registerServiceWorker();      

  (2)、一级路由就是Route文件下的index.js文件所示;

    代码如下:

import React, { Component } from 'react';
import { Switch, Route, Redirect, NavLink } from 'react-router-dom';
import Home from '../components/Home';
import Company from '../components/Company';
import Park from '../components/Park';
import './index.scss';

class Main extends Component {
    // constructor (props) {
    //     super(props);
    // };
    componentDidMount () {
        console.log('this is Main...');
    };

    render () {
        return (
            <main className={'mainSec'}>
                <nav>
                    <NavLink
              className="resetNavLink"
              activeClassName='navActive'
              to='/home'>
                {'Home'}
            </NavLink>
            &nbsp;&#x3000;
                    <NavLink
              className="resetNavLink"
              activeClassName='navActive'
              to='/company'>
                {'Company'}
            </NavLink>
            &nbsp;&#x3000;
                    <NavLink
              className="resetNavLink"
              activeClassName='navActive'
              to='/park'>
                {'park'}
            </NavLink>
                </nav>
                <Switch>
                    <Route exact path='/home' component={Home} />
                    <Route path='/company' component={Company} />
                    <Route exact path='/park' component={Park} />
                    <Redirect to='/home' />
                </Switch>
            </main>  
        )
    }
};

export default Main;      

     a、锚点的选择和使用

      现在,我们应用需要在各个页面间切换。如果使用锚点元素实现,在每次点击时页面将被重新加载。React Router提供了<Link>和<NavLink>组件用来避免这种状况的发生。当你点击<Link>时,URL会更新,组件会被重新渲染,但是页面不会重新加载。实际上锚点元素就是一个a标签,to属性就相当于href属性;

      <Link>使用'to'参数来描述需要定位的页面。它的值也可以是location对象(包含pathname,search,hash与state属性)。如果其值为字符串将会被转换为location对象。

      <NavLink>可以增加 activeClassName 或者 activeStyle 属性,设置当前路由被选中的样式;

         -- exact:  当为true时,仅当位置匹配完全时才会应用活动类/样式。

    b、Route

      path: string; 一个有效的URL路径。

      exact: bool  当为true时,仅当路径与location.pathname完全匹配时才匹配。如果该路由有子路由,不能设置为true。

      strict: bool  当为true时,具有尾部斜杠的路径将仅与具有尾部斜杠的location.pathname匹配。当在location.pathname中有其他URL段时,这不起作用。strict可以用来强制执行location.pathname没有尾部斜杠,但为了做到这一点,strict和exact必须是true。

      另外,还有component、render 和 children属性,这三个属性优先级依次降低,不可以在一个Route组件上使用这三个属性中的多个。一般选择用component属性。

    c、Redirect 重定向

      to: string/Object   要重定向到的网址。

      push: bool 当为true时,重定向会将新条目推入历史记录,而不是替换当前条目。

      from: string  要重定向的路径名。这只能用于在<Switch>内部呈现<Redirect>时匹配位置;

    d、Switch 它的独特之处是独它仅仅渲染一个路由;

  (3)、路由的嵌套

    路由嵌套在Companey组件中;代码如下;

import React, { Component } from 'react';
import { Switch, Route, NavLink, Redirect } from 'react-router-dom';
import FontEnd from './FontEnd';
import BackEnd from './BackEnd';
import Test from './Test';
import Manage from './Manage';

class Company extends Component {
    componentDidMount () {
        console.log('this is Company...');
    };

    render () {
        const { match } = this.props;
        // console.log(match);
        return (
            <div>
                <p>{'this is Company.....'}</p>
                <nav>
                    <NavLink
              className="resetNavLink"
              activeClassName='navActive'
              to='/company/fontEnd'>
                {'FontEnd'}
            </NavLink>
            &nbsp;&#x3000;
                    <NavLink
              className="resetNavLink"
              activeClassName='navActive'
              to='/company/backEnd'>
                {'BackEnd'}
            </NavLink>
            &nbsp;&#x3000;
                    <NavLink
              className="resetNavLink"
              activeClassName='navActive'
              to='/company/test'>
                {'Test'}
            </NavLink>
            &nbsp;&#x3000;
                    <NavLink
              className="resetNavLink"
              activeClassName='navActive'
              to='/company/manager'>
                {'Manager'}
            </NavLink>
                </nav>
                <Switch>
                    <Route exact path={`${match.path}/:department`} render={(localtions) => {
                            const { match: { params: {department} }} = localtions;
                            console.log(department);
                            const temp = {fontEnd: <FontEnd />, backEnd: <BackEnd />, test: <Test />, manager: <Manage />}
                            return temp[department];
                        }}
                    />
                    <Redirect to='company/fontEnd/' />
                </Switch>
            </div>
        );
    };
};

export default Company;      

    这个没有什么特别的,需要注意的就是,子路由Route的path和锚点的 to 都是需要一个完整的路由路径; 子路由路径中 ”:“ 后的属性是可传到子组件的参数,在子组件this.props.match.params中是可以拿到的。

继续阅读