Question

我是React框架的新手，现在正在开发一个简单的Redux webapp。

如果用户位于主页（http://localhost/xyz/home）上，并且如果我使用history.push（'/ xyz / profile'）推送了下一个状态，我会在URL中两次获得用户ID（xyz）（{{3} }）

如何更改状态？

谢谢， MSK

实际行动

import shareService from "../services/share.service";
import history from "../utils/history";
import _ from 'lodash';

export const shareUserInfo = (info) => dispatch => {
    shareService.shareUserInfo(info)
    .then(res => {
        history.push('/xyz/profile');
    },
    error => {
        console.log(error);
    });
}


In history.js

import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

export default history;

Answer 1

如果您有权访问React Router的match属性，请从match.url获取URL。

这不是一个干净的代码（因为它只是一个演示）而遗漏了一些代码
可在CodeSandBox上找到工作代码。

const App = ({ match, history }) => (
  <div className="App">
    <h1>Home</h1>
    <h2>Some  data</h2>
    <button onClick={e => toProfile(e, match.url, history)}>Profile</button>
  </div>
);

const toProfile = (e, url, history) => {
  e.preventDefault();
  console.log(`url=${url}`);
  history.push("/xyz/profile");
};

const toHome = (e, url, history) => {
  e.preventDefault();
  console.log(`url=${url}`);
  history.push("/xyz/home");
};

const rootElement = document.getElementById("root");
ReactDOM.render(
  <BrowserRouter>
    <Switch>
      <Route exact path="/" component={App} />
      <Route path="/xyz/home" component={App} />
      <Route path="/xyz/profile" component={Profile} />
    </Switch>
  </BrowserRouter>,
  rootElement
);

React Router 4：使用带有历史记录的路由参数更改路由

1 个答案: