第七步:React路由(客户端)

2022-03-29 17:21 更新

第七步:React路由(客户端)

在app/components目录下新建文件App.js,粘贴下面的代码:

import React from 'react';
import {RouteHandler} from 'react-router';

class App extends React.Component {
  render() {
    return (
      <div>
        <RouteHandler />
      </div>
    );
  }
}

export default App;

RouteHandler是渲染当前子路由处理器的组件,它将根据URL渲染这些组件中的一个:Home、Top100、Profile,或Add Character。

注意:它和AngularJS中的<div ng-view></div>挺相似,会将当前路由中已渲染的模板包含进主布局中。

然后,打开app目录下的routes.js,粘贴下面的代码:

import React from 'react';
import {Route} from 'react-router';
import App from './components/App';
import Home from './components/Home';

export default (
  <Route handler={App}>
    <Route path='/' handler={Home} />
  </Route>
);

之所以将路由像这样嵌套,是因为我们将在RouteHandler的前后添加Navbar和Footer组件。不像其它组件,路由改变的时候,Navbar和Footer组件会保持不变。

最后,我们需要添加一个URL监听程序,当URL改变时渲染应用。打开App目录下的main.js并添加下列代码:

import React from 'react';
import Router from 'react-router';
import routes from './routes';

Router.run(routes, Router.HistoryLocation, function(Handler) {
  React.render(<Handler />, document.getElementById('app'));
});

注意:main.js是我们的React应用的入口点,当Browserify将整个依赖树串起来并生成最终的bundle.js时会用到,这里我们填入初始化的内容后我们基本不用再动它了。

React Router引导route.js中的路由,将它们和URL匹配,然后执行相应的callback处理器,在这里即意味着渲染一个React组件到<div id="app"></div>。它是怎么知道要渲染哪个组件呢?举例来说,如果我们在/URL路径,那么<Handler />将渲染Home组件,因为我们之前已经在route.js指定这个组件了。后面我们将添加更多的路由。

另外注意,为了让URL好看点,我们使用了HistoryLocation来启用HMTL History API。比如它的URL看起来会是http://localhost:3000/add而不是http://localhost:3000/#add,因为我们构建的是一个同型React应用(在客户端和服务端都能渲染),所以我们不需要用一些 非正统的方式在服务器上重定向以启用这项特性,它直接就能用。

接下来让我们创建这一节最后一个React组件。在app/components目录新建文件Home.js,并添上内容:

import React from 'react';

class Home extends React.Component {
  render() {
    return (
      <div className='alert alert-info'>
        Hello from Home Component
      </div>
    );
  }
}

export default Home;

下面应该是我们在目前所创建的所有内容。现在是你检查代码的好时候了.

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号