关于react router 4 的小实践

2023-08-04 09:26:40

详细代码栗子：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、开始项目代码

　　代码结构如下：

　　（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;　

                    <NavLink
　　　　　　　　　　　　　　className="resetNavLink"
　　　　　　　　　　　　　　activeClassName='navActive'
　　　　　　　　　　　　　　to='/company'>
　　　　　　　　　　　　　　　　{'Company'}
　　　　　　　　　　　　</NavLink>
　　　　　　　　　　　　&nbsp;　

                    <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;　

                    <NavLink
　　　　　　　　　　　　　　className="resetNavLink"
　　　　　　　　　　　　　　activeClassName='navActive'
　　　　　　　　　　　　　　to='/company/backEnd'>
　　　　　　　　　　　　　　　　{'BackEnd'}
　　　　　　　　　　　　</NavLink>
　　　　　　　　　　　　&nbsp;　

                    <NavLink
　　　　　　　　　　　　　　className="resetNavLink"
　　　　　　　　　　　　　　activeClassName='navActive'
　　　　　　　　　　　　　　to='/company/test'>
　　　　　　　　　　　　　　　　{'Test'}
　　　　　　　　　　　　</NavLink>
　　　　　　　　　　　　&nbsp;　

                    <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中是可以拿到的。

码农公寓

相关文章