在React中放置通用路由器的位置以及如何定义链接?

时间:2017-06-06 03:03:32

标签: reactjs react-router

这些都是非常基本的问题,但universal-router的文档并未解释这一点,而且它给出的示例似乎并不适用于我的React项目。

我在index.js

中有这个
import Router from 'universal-router';
import { HomeComponent, HelpComponent, AboutComponent } from './home.jsx';

const routes = [
    { path: '/', action: () => <HomeComponent /> },
    { path: '/home', action: () => <HomeComponent /> },
    { path: '/about', action: () => <AboutComponent /> },
    { path: '/help', action: () => <HelpComponent /> },
    { path: '*', action: () => <h1>Nope.</h1> }
];

const router = new Router(routes);

router.resolve({ path: '/' }).then(component => {
    ReactDOM.render(component, document.getElementById('router-outlet'));
});

router.resolve({ path: '/help' }).then(component => {
    ReactDOM.render(component, document.getElementById('router-outlet'));
});

router.resolve({ path: '/about' }).then(component => {
    ReactDOM.render(component, document.getElementById('router-outlet'));
});

这是我App组件中的一个非常简单的菜单:

export class App extends React.Component {
    render() {
        return(
                <div>
                    <a href="/">Root</a> |&nbsp;
                    <a href="/home">Home</a> |&nbsp; 
                    <a href="/help">Help</a> |&nbsp;
                    <a href="/about">About</a> |&nbsp;
                    <a href="/uijsklfdsse">404</a>
                </div>
                );
    }
}

如您所见,这非常简单,我只想弄清楚如何使其正常工作。它几乎就是所写的here,,但它并没有起作用。出于某种原因,它始终是被调用的AboutComponent,并且当我点击链接时,浏览器似乎刷新整个页面,因此它不像SPA一样。我有一种感觉,我将路线定义放在错误的地方,但我应该把它放在哪里?这是我应该如何定义链接?

我正在使用universal-router,因为React-router在安装时说它已被弃用并被此内容取代。让我知道这是不是一个坏主意。

2 个答案:

答案 0 :(得分:6)

你的路线看起来很好。您可以通过处理默认href行为来阻止浏览器刷新。即onClick(event) { event.preventDefault(); }

要使用窗口History API并管理推送状态,您可以使用我推荐的此history插件,或者您可以手动或使用其他插件进行操作。

为了使您的路由器更加灵活,您可以使用某个功能动态解决路由,这样您就可以随时调用它。

而不是

router.resolve({ path: '/' }).then(component => {
    ReactDOM.render(component, document.getElementById('router-outlet'));
});

router.resolve({ path: '/help' }).then(component => {
    ReactDOM.render(component, document.getElementById('router-outlet'));
});

router.resolve({ path: '/about' }).then(component => {
    ReactDOM.render(component, document.getElementById('router-outlet'));
});

你可以做到

const router = new Router(routes);

function renderRoute(location) {
  router.resolve({ path: location.pathname }).then(component => {
    render(component, document.getElementById('router-outlet'));
  });
}

renderRoute(window.location);

然后每当窗口路径发生变化时调用renderRoute

使用history,通过提供侦听器和其他一些有用的功能,可以更轻松地实现这一目标。您所要做的就是创建一个实例并在整个应用程序中使用它。

在某处制作单身人士(即history.js

import createHistory from 'history/createBrowserHistory';
export default createHistory();

并将其用于导航

...
import history from './history.js';

export class App extends React.Component {
  handleClick(event) {
    event.preventDefault();
    history.push({
      pathname: event.currentTarget.pathname
    });
  }
  render() {
      return(
        <div>
            <a href="/" onClick={this.handleClick}>Root</a> |&nbsp;
            <a href="/home" onClick={this.handleClick}>Home</a> |&nbsp; 
            ...
        </div>
      );
  }
}

和路由索引

import history from './history.js'
...

renderRoute(history.location);

history.listen(renderRoute); 

如果你想了解更多,这个how-to会更深入一些。

答案 1 :(得分:0)

我认为你应该只调用一次router.resolve。这似乎是您的应用程序始终以AboutComponent结束的原因。尝试从index.js中删除此部分:

router.resolve({ path: '/help' }).then(component => {
    ReactDOM.render(component, document.getElementById('router-outlet'));
});

router.resolve({ path: '/about' }).then(component => {
    ReactDOM.render(component, document.getElementById('router-outlet'));
});

此外,不推荐使用react-router。我建议你使用react-router: https://github.com/ReactTraining/react-router