ReactJS路由URL由配置生成

Question

假设我有这个应用代码

const Menu = () => {
return (
<nav>
<Link to="/">Home</Link>
<Link to="/contact">Contact</Link>
<Link to="/about">Contact</Link>
</nav>
)
};
const App = () => {
return (
<Router>
<div>
<Menu/>
<Route exact path="/" component={Home} />
<Route path="/contact" render={() =>
<h1>Contact</h1>
} />
<Route path="/about" render={() =>
<h1>About</h1>
} />
</div>
</Router>
);
};
export default App;

我想知道的只是如何使路由路径非静态并将整个路由树基于某种配置。

假设我想将/about路由路径更改为/about_us。在这种情况下，我需要在整个项目中搜索/about字符串并正确替换它。当项目相当大时，这不是乐观的方式。

如果我在常量中存储了一些路由配置，并且某种函数根据路由名称和查询参数等一些数据生成整个路径，该怎么办？例如：

const ROUTES = {
home : '/',
page: '/page/:pageid',
about: '/about'
};
const url = (routeName, routeParams) => {
// here generate route for particular route name
};

然后我可以像这样更改我的 JSX：

<Link to={ url('contact') }>Contact</Link>

因此，随着ROUTES常量的变化，使用url()函数生成的所有路由路径也将发生变化。

我的问题是：
对于这类问题，是否有任何现有的良好解决方案/实践/模式/包？

(顺便说一句，只是学习ReactJS)

然后出现了一个问题。什么与 ReactJS 应用程序模块化。如何划分路由配置以仅存储在特定模块中(例如："博客"模块中的帖子路由配置)。

Answer 1

我知道为时已晚，但以防万一有人想要一个使用 react-router 的强类型版本：

import { generatePath } from "react-router";
const generateRoutes = (routes) => {
return Object.keys(routes).reduce((agg, next) => {
agg[next] = {
path: routes[next],
to: (params) => generatePath(routes[next], params)
};
return agg;
}, {});
};
export const Routes = generateRoutes({
home: "/",
contactUs: "/contact-us",
blogPost: `/blog-post/:id`,
products: `/products/:category(A|B|C)/:sort(ASC|DESC)?`,
});
console.log(Routes.home.path) // outputs: /
console.log(Routes.contactUs.to()) // outputs: /contact-us
console.log(Routes.products.to({category: "A", sort: "ASC"})) // outputs: /products/A/ASC

Answer 2

为什么不写你自己的？简单的可能看起来像这样

// CLASS
class AppRoutes {
constructor(routes) {
this.routes = routes;
}
path(name) {
return this.routes[name]
}
to(name, ...params) {
const regex = /:[^/:]+/;
let path = this.routes[name],
i = 0,
result;
while(result = regex.exec(path)) {
path = path.replace(result[0], params[i])
i++
}
return path;
}
}
// USAGE
var appRoutes = new AppRoutes({
home: '/',
about: '/about',
post: '/posts/:byUser/:id',
})
console.log( 
appRoutes.path('about') 
)
console.log(
appRoutes.to('post', 'John', 'somepostId')
)