NowaGui里antd-mobile脚手架建的项目，路由应该怎么写

Question

NowaGui里antd-mobile脚手架建的项目，路由应该怎么写？
比如上面的导航路径/home/nav，添加了这个路径文件但是访问不到是为什么

export default {
menu: [
{"title":"导航", "icon":"nav", "path":"/home/nav" },
{"title":"数据录入", "icon":"entry", "path":"/home/entry" },
{"title":"数据显示", "icon":"display", "path":"/home/display"},
{"title":"反馈", "icon":"feedback", "path":"/home/feedback" },
{"title":"其它", "icon":"other", "path":"/home/other" }
],
}

require('./PageHome.less');
import logic from './PageLogic';
import { Control, Route } from 'react-keeper';
import { Component, LogicRender } from 'refast';

import TabBar, { activeTabbar } from 'components/card-tabbar';
import { NavBar } from 'antd-mobile';

class Home extends Component {
constructor(props) { super(props, logic);

this.handleChange = this.handleChange.bind(this);
}

handleChange(key){
    this.dispatch('setTabbarIndex',key);
    Control.go(this.state.menu[key].path, ); // keeper的跳转
}

render() {
    const { state: { menu, tabbarIndex, badge, },  } = this;
    const activeIndex=activeTabbar( menu );

    if (tabbarIndex != activeIndex  ){ // 对比url索引和当前选中的值,如不对应则纠正.
        this.dispatch('setTabbarIndex',activeIndex);
    }

    return (
        <div className="home">
            <NavBar
                iconName=""
                mode="light">
                菜单
            </NavBar>

            {/*中间嵌套的页面*/}
            {this.props.children}

            <TabBar menu={menu} tabbarIndex={tabbarIndex} badge={badge} onChange={this.handleChange} />
        </div>
    );
}

componentDidMount() {
    dd.biz.navigation.setTitle({ title:'Home' })
}

}

export default Home ;

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

在使用 NowaGui 和 Antd-Mobile 构建的 React.js 项目中，您可以在路由配置文件（例如：src/router/index.js）中定义路由。以下是一个简单的示例：

// src/router/index.js

const routes = [
  {
    path: '/',
    component: () => import('@/pages/Home'),
  },
  {
    path: '/home',
    component: () => import('@/pages/Home'),
  },
];

export default routes;

在这个例子中，我们创建了一个名为 routes 的数组，其中包含多个路由对象。每个路由对象都有一个 path 属性，表示该路由应该在哪里显示；以及一个 component 属性，用于导入相应的组件。

然后，在您的组件类中，您可以根据需要将这些路由导出到公共组件中，并在需要时调用它们。

例如：

// src/pages/Home.js

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import { setTabbarIndex } from 'actions/navigation';

class Home extends React.Component {
  handleChange = (key) => {
    this.props.setTabbarIndex(key);
    this.props.dispatch(setTabbarIndex(key));
  };

  render() {
    const { state: { menu, tabbarIndex, badge }, dispatch } = this.props;

    if (tabbarIndex !== this.props.tabbarIndex) {
      dispatch(setTabbarIndex(this.props.tabbarIndex));
    }

    return (
      <div>
        {/* 中间嵌套的页面 */}
        {this.props.children}
        <TabBar
          menu={menu}
          tabbarIndex={tabbarIndex}
          badge={badge}
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

const mapStateToProps = ({ navigation }) => ({
  tabbarIndex: navigation.get('tabbarIndex'),
});

export default connect(mapStateToProps)(Home);

在这个例子中，我们首先从 navigation 模块获取 get 方法，以便我们可以通过它来获取 tabbarIndex 的值。然后，我们在 mapStateToProps 函数中返回一个映射器对象，它包含了我们需要传递给 connect 的状态键。最后，我们将 Home 组件连接到我们的应用上下文中。