每次 URL 更改时，带有 browserHistory 的 React 路由器都会转到服务器

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

假设您在后端使用节点，请确保根据 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 2

您不应该直接更改 location.href。您应该使用以下方式将新的 path 发送到 React：

ReactRouter.browserHistory.push(newPath);

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

Answer 3

React 路由器将当前视图中使用的历史记录作为道具公开。查看他们的文档以了解所有注入的道具 here。

如果您想从 DJSAppContainer 或两个子视图 DJSPage 或 PageContainer 中的任何一个重定向，您可以通过访问历史记录属性:

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

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

似乎历史属性现在已被弃用，并且似乎被 implementation of the link component 中看到的路由器上下文属性所取代。基本上，如果您真的希望您的代码面向未来，您应该要求提供 contextType:

contextTypes: {
     router: object
},

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

this.context.router.push('/some/path')

Answer 4

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

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

在表单 onSubmit 上调用 handleSubmit。

每次 URL 更改时，带有 browserHistory 的 React 路由器都会转到服务器

React router with browserHistory goes to server on every URL change

reactjs

react-router

jsx