这些都是非常基本的问题,但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> |
<a href="/home">Home</a> |
<a href="/help">Help</a> |
<a href="/about">About</a> |
<a href="/uijsklfdsse">404</a>
</div>
);
}
}
如您所见,这非常简单,我只想弄清楚如何使其正常工作。它几乎就是所写的here,,但它并没有起作用。出于某种原因,它始终是被调用的AboutComponent
,并且当我点击链接时,浏览器似乎刷新整个页面,因此它不像SPA一样。我有一种感觉,我将路线定义放在错误的地方,但我应该把它放在哪里?这是我应该如何定义链接?
我正在使用universal-router
,因为React-router
在安装时说它已被弃用并被此内容取代。让我知道这是不是一个坏主意。
答案 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> |
<a href="/home" onClick={this.handleClick}>Home</a> |
...
</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