本文共 3746 字，大约阅读时间需要 12 分钟。

基本使用

第一步（安装）

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

第二步（引入）

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

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

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

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

//Router.jsimport 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.jsimport 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.jsimport 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. 这样就达到了路由嵌套，而且添加路由也相对简单了

下一篇：