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

Question

这些都是非常基本的问题,但是文档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>
                );
    }
}

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

我正在使用,universal-router因为React-router在安装时说它被弃用并被这个东西取代.如果这是一个坏主意,请告诉我.

Answer 1

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

要使用窗口历史记录API和管理推送状态,您可以使用我推荐的历史插件,或者您可以手动或使用其他插件进行操作.

为了使您的路由器更加灵活,您可以使用函数动态地解析路由,这样您就可以随时调用它.

代替

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); 

如果你想了解更多信息,这个方法可以更深入一些.