react路由使用以及封装

基本使用

第一步（安装）

yarn add react-router-dom
# or, if you're not using yarn
npm install react-router-dom

第二步（引入）

路由对应官网

1. 在目录container下新建两个文件，home.js和detail.js

//home.js
import React from 'react';
export default class Home extends React.Component {
    render() {
        return (
            <div>
                <a href='/detail'>去detail</a>
            </div>
        )
    }
}

//detail.js
import React from 'react';
export default class Home extends React.Component {
    render() {
        return (
            <div>
                <a href='/'>回到home</a>
            </div>
        )
    }
}

3. 我们可以在src中新建目录router,然后建Router.js文件

//Router.js
import React from 'react'
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from '../containers/home.js'
import Detail from '../containers/detail.js'
import App from '../App';
const BasicRoute = () => (
     <Router>
        <div>
            <Route exact path="/">
                <Home />
            </Route>
            <Route exact path="/App">
                <App />
            </Route>
            <Route path="/detail">
                <Detail />
            </Route>
        </div>
    </Router>
);
export default BasicRoute;

第三步（在index.js中引入路由组件）

ReactDOM.render(
    <Router />,
    document.getElementById('root')
);

路由封装

第一步

1. 新建store目录，router.js

//router.js
import React from 'react'
import ReactDOM from "react-dom";
import {BrowserRouter as Router, Route} from "react-router-dom";
import Home from '../containers/home.js'
import Detail from '../containers/detail.js'
import A from '../containers/A.js'
import Index from '../containers/index.js'
import advantage from '../containers/advantage.js'
import App from '../App';
import Store from '../components/testStore'
const routes = [
    {
        path: '/',
        component: App,
        exact: true,
    },
    {
        path: '/advantage',
        component: advantage,
        children: [
            {
                path: '/advantage/advantage1',
                component: A
            }
        ]
    },
    {
        path: '/Home',
        component: Home,
        exact: true,
    },   {
        path: '/store',
        component: Store,
        exact: true,
    },
]

export  { routes };

第二步

1. index.js中添加

 (<BrowserRouter>
        {renderRoutes(routes)}
    </BrowserRouter>),

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { routes } from './router/Router.js';
import { BrowserRouter } from 'react-router-dom';
import { renderRoutes } from 'react-router-config';
import Index from './containers/index.js'

ReactDOM.render(
    (<BrowserRouter>
        {renderRoutes(routes)}
    </BrowserRouter>),
    document.getElementById('root')
);

组件中使用

 {renderRoutes(route.children)}
              

import React from 'react';
import { Link } from 'react-router-dom';
import { renderRoutes } from 'react-router-config'

export default class FyAdvantage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            route: props.route,
        }
    }

    render (){
        const route = this.state.route;
        return(
            <div>
                {renderRoutes(route.children)}
                <div>
                    <ul>
                        <li>
                            <Link to="/advantage/advantage1">advantage1</Link>
                        </li>
                        <li>
                            <Link to="/advantage/advantage2">advantage2</Link>
                        </li>
                        <li>
                            <Link to="/advantage/advantage3">advantage3</Link>
                        </li>
                    </ul>
                </div>
            </div>
        )
    }
}

2. 这样就达到了路由嵌套，而且添加路由也相对简单了

下一篇：使用Ant Design中Layout布局实现一个简单的react管理后台