时间戳

首页 > 解决方案 > 如何使用 URL 参数更改使用 reactjs 导入文件的位置？

javascript - 如何使用 URL 参数更改使用 reactjs 导入文件的位置？

问题描述

我有一个反应应用程序，我正在使用 react-router-dom 来获取用户输入的 Url 参数，例如：

localhost:300/Orange

然后我可以像这样在页面上回显“橙色”：

export  function test() {
  return (
    <Router>
        <Switch>
          <Route path="/:id" children={<Child />} />
        </Switch>
    </Router>
  );
}
function Child() {

  let { id } = useParams();

  return (
    <div>
     {id}
    </div>
  );
}

但是，在我的应用程序中，我正在导入一个文件，我希望导入的文件是 URL 参数的值，所以如果用户访问：localhost:3000/banana，页面将像这样导入“香蕉”：

import React, { Component } from 'react'
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams
} from "react-router-dom";
import {
  loadWeb3,
  loadAccount,
  loadToken,
  loadExchange
} from '../store/banana'

或者如果用户访问localhost:3000/apple：

import React, { Component } from 'react'
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams
} from "react-router-dom";
import {
  loadWeb3,
  loadAccount,
  loadToken,
  loadExchange
} from '../store/apple'

我想我必须 {id}像这样使用，'../store/{id}'但是我不确定在“import”语句周围添加函数的位置。

我怎样才能做到这一点？

标签： javascriptreactjs

解决方案

要实现类似的目标，您需要动态导入。

但是由于动态导入不是使用捆绑程序（Webpack、Rollup、Parcel...）很容易实现的，我建议您找到另一种导入策略。

也许您可以创建一个导入所有商店的新文件，然后在 Child 中解析正确的功能。例子。

商店/fruits.js

import * as banana from './banana'
import * as apple from './apple'

export default {
  banana,
  apple
}

组件/Child.js

import React, { Component } from 'react'
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams
} from "react-router-dom";
import fruits from '../store/fruits'

function Child() {
  let { id } = useParams();

  const {
    loadWeb3,
    loadAccount,
    loadToken,
    loadExchange
  } = fruits[id];

  return (
    <div>
     {id}
    </div>
  );
}

推荐阅读