react.js - [react-router] Location "/hopper" did not match any routes

问题描述

问 题

router.js如下

import React, { PropTypes } from 'react';
import { Router, Route, IndexRoute } from 'dva/router';
import MainLayout from './routes/MainLayout';
import Dashboard from './routes/Dashboard';
import Hopper from './routes/Hopper';

export default function({ history }) {
  return (
    <Router history={history}>
        <Route path="/" component={MainLayout} >
            <IndexRoute component={Hopper} />
            <Route path="/dashboard" component={Dashboard} />
        </Route>
    </Router>
  );
};

routes/MainLayout.js

import React, { PropTypes } from 'react';
import Layout from '../components/MainLayout/Layout';

const MainLayout = (props) => {
    // const { username, current } = user;
    const layoutProps = {
        user: {
            current: 'hopper',
            username: 'cjc',
        },
        children: props.children,
    };
    return (
        <div>
            <Layout {...layoutProps} />
        </div>
    );
}

MainLayout.propTypes = {
};

export default MainLayout;

routes/Hopper.js

import React, { PropTypes } from 'react';
import HopperList from '../components/Hopper/HopperList';

function Hopper() {
    const hopperList = {};
    return (
        <div>
            <HopperList {...hopperList} />
        </div>
    );
}

Hopper.propTypes = {
};

export default Hopper;

components/MainLayout/Layout.js

import React, { PropTypes } from 'react';
import { Menu, Icon } from 'antd';
import { Link } from 'dva/router';
import styles from './Layout.scss';

const SubMenu = Menu.SubMenu;

const Layout = (user, children) => {
    const { username, current } = user;
    return (
        <div>
            <div className={styles.leftMenu}>
                <img src='../src/assets/images/logo.png' className={styles.logo}/>
                <Menu theme="dark"
                      mode="inline"
                      defaultSelectedKeys={[current]}
                >
                    <Menu.Item key="dashboard">
                        <Link to="/dashboard">看板</Link>
                    </Menu.Item>
                    <Menu.Item key="hopper">
                        <Link to="/hopper">漏斗</Link>
                    </Menu.Item>
                </Menu>
            </div>
            <div className={styles.rightWrap}>
                <Menu mode="horizontal">
                    <SubMenu title={<span><Icon type="user" />{username}</span>} className={styles.fr}>
                        <Menu.Item key="setting:1">退出</Menu.Item>
                    </SubMenu>
                </Menu>
                <div className={styles.rightBox}>

                </div>
            </div>
        </div>
    );
};

export default Layout;

刚接触react，比较小白，另外觉得组织组件方面好像不太懂

解决方案

components/MainLayout/Layout.js

import React, { PropTypes } from 'react';
import { Menu, Icon } from 'antd';
import { Link } from 'dva/router';
import styles from './Layout.scss';

const SubMenu = Menu.SubMenu;

const Layout = (user, children) => {
    const { username, current } = user;
    return (
        <div>
            <div className={styles.leftMenu}>
                <img src='../src/assets/images/logo.png' className={styles.logo}/>
                <Menu theme="dark"
                      mode="inline"
                      defaultSelectedKeys={[current]}
                >
                    <Menu.Item key="dashboard">
                        <Link to="/dashboard">看板</Link>
                    </Menu.Item>
                    <Menu.Item key="hopper">
                        <Link to="/hopper">漏斗</Link>
                        // 改成<Link to="/">漏斗</Link>就应该OK了。你在路由中并没有定义这个路径
                    </Menu.Item>
                </Menu>
            </div>
            <div className={styles.rightWrap}>
                <Menu mode="horizontal">
                    <SubMenu title={<span><Icon type="user" />{username}</span>} className={styles.fr}>
                        <Menu.Item key="setting:1">退出</Menu.Item>
                    </SubMenu>
                </Menu>
                <div className={styles.rightBox}>

                </div>
            </div>
        </div>
    );
};

export default Layout;

这篇关于react.js - [react-router] Location "/hopper" did not match any routes的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！