通过React Router传递参数

debugcn 发表于 Dev

Zvi薄荷糖

我是React的新手，我有以下应用程序：（index.js）

import ReactDOM from 'react-dom'
import {Component} from 'react';
import './style.css'

import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";


import Header from './components/Header'
import Body from './components/Body'
import Footer from './components/Footer'

class App extends Component {
    render() {
        return (
            <div id="layout">
              <Header />
              <Body />
              <Footer />
            </div>
          );
    }
}

ReactDOM.render( <App />, document.querySelector("#root"));

每次我将localhost:portIm重定向到此componenet时，我都想使用Router并提取数据，例如：

localhost:port/instanceName=valuevalue仅当valueisx或时y，才可以将我带到具有道具的同一个零件上吗？

Sadrzadehsina

我建议您以这种方式进行设置。这只是一个提取所有url参数的自定义钩子。

// use-query-string.js
import { useLocation } from 'react-router-dom';

export const useQueryString = () => {
  return new URLSearchParams(useLocation().search);
};

然后，您可以在组件中调用此函数，从而在URL中提供查询字符串列表。实际上，每次您调用它时，都会给您传递参数的列表。

const queryString = useQueryString();

最后，您可以提取所需的内容。只需通过传递您要查找的参数名称即可。

queryString.get('instanceName')

在您的情况下，可能是这样。

import { useQueryString } from 'use-query-string';
class App extends Component {
   
   const queryString = useQueryString();

   useEffect(() => {
     const value = queryString.get('instanceName');
     
     if (value === 'x') {
       // do this
     } else if (value === 'y') {
       // do that
     }
     
   }, [queryString])

    render() {
        return (
            <div id="layout">
              <Header />
              <Body />
              <Footer />
            </div>
          );
    }
}

但请记住，您的网址应为localhost:port?instanceName=value。实际上，而不是/最后需要放置?。我不确定它是否也适用/。您可以进行测试和调整（如果没有）。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。