Question

我正在尝试将子视图（组件）渲染到基于组件链接上的导航菜单，相应地更改URL。我的路由器是：

const router = new Router(on => {

  on('*', async (state, next) => {
    const component = await next();
    return component && <App context={state.context}>{component}</App>;
  });

  on('/profile', async () => <ProfilePage />);

  on('/contact', async () => <ContactPage />);

  on('/login', async () => <LoginPage />);

  on('/register', async () => <RegisterPage />);

  on('*', async (state) => {
    const content = await http.get(`/api/content?path=${state.path}`);
    return content && <ContentPage {...content} />;
  });

  on('error', (state, error) => state.statusCode === 404 ?
    <App context={state.context} error={error}><NotFoundPage /></App> :
    <App context={state.context} error={error}><ErrorPage /></App>);

});

class ProfilePage extends React.Component {

  render() {

    var user = "Username";

    return (
      <div>
        <ProfileHead>
          <Cover user={user} />
          <Menu />
          <SubMenu />
        </ProfileHead>
        <ProfileBody>
          <ProfileHome />
        </ProfileBody>
      </div>
    );
  }

}

class Menu extends React.Component {

  render() {

    return (
      <div className="menu">
        <div className="menu-inner">
          <Nav followers="522234" following="133234" />
        </div>
      </div>
    );
  }

}

class Nav extends React.Component {

  render() {
    return (
      <div>
        <a href="#" className="menu-link active">Profile</a>
        <a href="#" className="menu-link">Portfolio</a>
        <a href="#" className="menu-link">Activity</a>
        <a href="#" className="menu-link">Following <span className="followCount">{this.props.following}</span></a>
        <a href="#" className="menu-link">Followers <span className="followCount">{this.props.followers}</span></a>
      </div>
    );
  }
}

我不确定如何实现这一目标。任何帮助将不胜感激。我是React的新手并慢慢学习。

Answer 1

我建议使用react-router

您可以创建嵌套路线，每个路线都加载其他子组件

var Router = require('react-router');
var Route = Router.Route;

// declare our routes and their hierarchy
var routes = (
  <Route handler={App}>
    <Route path="about" handler={About}/>
    <Route path="inbox" handler={Inbox}/>
  </Route>
);

ReactJS使用url更改呈现子视图

1 个答案: