6

我正在做类似的事情：

<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"，它都会转到服务器并加载内容。

4

4 回答 4

6

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

ReactRouter.browserHistory.push(newPath);

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

于 2016-03-01T15:00:40.920 回答
2

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

如果您想从DJSAppContainer两个子视图中的任何一个重定向，DJSPage或者PageContainer您可以通过访问 history 属性来实现：

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

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

// somewhere like a redux/flux action file:
import { browserHistory } from 'react-router'
browserHistory.push('/some/path')

这两种方法假设您尝试基于一些复杂的逻辑进行重定向，而不是作为点击事件的结果。如果你只想处理点击事件，请尝试使用<Link/>react-router 的组件。

似乎历史属性现在已被弃用，并且似乎被路由器上下文属性所取代，如在链接组件的实现中所见。基本上，如果你真的希望你的代码是面向未来的，你应该询问 contextType：

contextTypes: {
     router: object
},

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

this.context.router.push('/some/path')
于 2016-03-05T22:45:29.307 回答
1

假设您在后端使用 node，请确保根据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。希望这能回答你的问题。

于 2016-03-01T01:37:26.083 回答
0

我遇到了类似的问题，而 hashHistory 工作没有问题 browserHistory 总是会从服务器加载。我通过记住调用 preventDefault() 来让事情正常进行。这是我的功能：

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

在表单 onSubmit 上调用 handleSubmit。

于 2016-03-07T00:23:17.620 回答