在哪里把通用路由器放入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> 
       ); 
    } 
} 

正如你看到的，这是非常简单的，我只是想来计算如何让这个工作。它几乎正是写入here,但它不起作用。出于某种原因，它总是被调用的AboutComponent，并且当我点击一个链接时，浏览器似乎刷新了整个页面，因此它不像SPA。我有一种感觉，我把路线定义放在错误的地方，但我应该把它放在哪里？这是我应该如何定义链接？

我使用的是universal-router，因为React-router在安装时表示它已被弃用并由此替换。让我知道这是不是一个好主意。

Answer 1

我想你应该只调用一次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

Answer 2

你的路线看起来不错。您可以通过处理默认的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去多一点的深度，如果你想知道更多。