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应用程序模块化。如何将路由配置划分为仅存储在特定模块中（例如：在＆＃34;博客＆＃34;模块中发布路由配置）。

Answer 1

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

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

Answer 2

我知道为时已晚，但以防万一有人想要使用反应路由器的强类型版本：

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

通过config生成的ReactJS路由URL

2 个答案: