Question

我正在做类似的事情：

<Router history={browserHistory}>{routes}</Router>

当我在上面的地址栏中的URL更改时，调用将转到服务器，但这不是我想要的，我希望第一次从服务器加载页面，但之后只要路由更改组件只在客户端加载。我在这里错过了什么吗？

在客户端，我正在做类似的事情：

ReactDOM.render(
<Provider store={app.store}>
    <Router history={browserHistory}>{routes}</Router>
</Provider>,
document.getElementById('app'));

我的路线如下：

const routes = <Route path="/" component={DJSAppContainer}>
<Route path="page" component={DJSPage}>
<Route path="/page/:pageName" component={PageContainer}/>
</Route>
</Route>;

现在每当我执行location.href =“/ page / xyz”时，它都会转到服务器并加载内容。

Answer 1

你不应该直接改变location.href。您应该使用以下命令将新的path发送到React：

ReactRouter.browserHistory.push(newPath);

如果你有锚标签，你应该使用@ ahutch的答案中提到的<Link>组件。

Answer 2

React路由器公开了当前视图中使用的历史记录。有关注入的所有道具here，请参阅他们的文档。

如果您想从lineWidth或两个子视图DJSAppContainer或DJSPage中的任何一个重定向，您可以通过访问历史记录属性来执行此操作：

PageContainer

如果另一方面你做了一些花哨的东西，并想从组件外部重定向，试试这个（取自react router docs）

const {history} = this.props;
history.pushState('/path/to/new/state');

这两种方法假设您尝试基于某些复杂逻辑重定向，而不是因为单击事件而导致重定向。如果您只想处理点击事件，请尝试使用react-router的// somewhere like a redux/flux action file: import { browserHistory } from 'react-router' browserHistory.push('/some/path')组件。

似乎现在不推荐使用history属性，并且似乎被路由器上下文属性所取代，如implementation of the link component中所示。基本上，如果您真的希望您的代码能够在未来证明，那么您应该要求contextType：

<Link/>

然后从组件的上下文中使用它：

contextTypes: {
     router: object
},

Answer 3

假设您在后端使用节点，请确保根据react-router docs设置节点。

// send all requests to index.html so browserHistory in React Router works
app.get('*', function (req, res) {
  res.sendFile(path.join(__dirname, 'index.html'))
})

此外，当您在组件之间进行链接并且希望确保使用react-router进行路由而不是服务器时，请务必使用Link。希望这能回答你的问题。

Answer 4

我遇到了类似的问题，而hashHistory在没有问题的情况下工作，浏览器始终会从服务器加载。我通过记住调用preventDefault（）来完成工作。这是我的功能：

handleSubmit: function (e) {
    e.preventDefault();
    var username = this.usernameRef.value;
    this.usernameRef.value = '';
    this.context.router.push(`/profile/${username}/`);
}

在onSubmit表单上调用handleSubmit。

使用browserHistory的React路由器会在每次更改URL时转到服务器

4 个答案: