Question

我已阅读this帖子，但我不想在我的某个组件中使用browserHistory.push('/some/path')而我的路由器文件中有<Route path="/some/path" component={SomePage} />，因为路径是重复的。如果我想将该路径更改为/another/path该怎么办？现在我需要记住在路由器文件和我的组件中更新它。

有更好的解决方法吗？我想我可以"/some/path"和我在路由器和我的组件中导入和引用的一些常量文件中定义的所有其他路径。例如：

paths.js

var Paths = {
    myPath: "/some/path",
    ...
}
module.exports = Paths

router.jsx

var Paths = require('constants/paths');
...
<Route path={Paths.myPath} component={SomePage} />

component.jsx

var Paths = require('constants/paths');
...
browserhistory.push(Paths.myPath)

这似乎在处理像/some/path/:id这样的网址参数时会有点混乱，所以我希望可能有更好的方法。

Answer 1

这是我过去为路由做的事情，使其更简单/更简化。

（作为旁注我在这里使用lodash，所以如果你不是你可以使用本机函数做基本相同的事情.lodash只是添加了一堆你不需要自己编写的好功能/功能）< / p>

在我的routes.jsx文件中你应该创建一些函数，将任何参数转换为一个url，这个答案的默认路径只允许为一个配置文件路由创建一个

export function pathToProfile(userName, params) {
  return path(Paths.PROFILE, _.assign({userName}, params));
}

path()函数只是一个用于生成路径的简单帮助实用程序函数。

path(url, params, urlMap) {
  if(!url) {
    console.error("URL is not defined for action: ", params);
  }
  if(!params)
    return url;
  params = _.merge({}, params);
  if(urlMap) {
    _.keys(urlMap).forEach((k) => {
      params[urlMap[k]] = params[k];
      delete params[k];
    });
  }
  if(url.indexOf(":") !== -1) {
    url.match(/:([0-9_a-z]+)/gi).forEach((match)=>{
      var key = match.replace(":", "");
      url = url.replace(match, params[key]);
      params = _.omit(params, key);
    });
  }
  if(_.keys(params).length > 0) {
    url = url + "?" + this.paramsToString(params);
  }
  return url;
}

现在查看常量文件

Paths {
  PROFILE: '/user/:username',
}

最后用法。

当你有一个onClick处理程序时，我不推荐使用broswerHistory.push（）。是的它可以工作并且会重定向，但这是最好用的吗？ react-router还有Link，应该尽可能使用。你会得到一些不错的附加功能，例如，对于你正在使用的任何页面，它都是一条有效的路线。

browserHistory.push（）是一种处理重定向的好方法，当您执行auth登录重定向或者您正在响应请求中的数据并有条件地将它们带到页面时。

<Route path={Paths.PROFILE} component={Profile} />

<Link to={pathToProfile(this.props.user.username, {myParams: 'here'})></Link>

如果您想要查看来自该确切链接的网址，那将会被翻译成/user/someUsername?myParams=here

使用反应路由器以编程方式导航而不重复路径

1 个答案: