Question

我将React和React Router一起使用，我有3个链接，它们的路径与组件相同。如何在单击组件时传递不同的参数？

const Example = props => {
  console.log("props", props);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
};

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path={"/example"} render={() => <Example />} />
      </Switch>
      <>
        <Link to={"/example"} params={{ name: "john" }}>
          <button>name</button>
        </Link>
        <Link to={"/example"} params={{ age: "27" }}>
          <button>age</button>
        </Link>
        <Link to={"/example"} params={{ surname: "Travolta" }}>
          <button>surname</button>
        </Link>
      </>
    </BrowserRouter>
  );
}

CodeSanbox

Answer 1

您改进的代码

const Example = props => {
  console.log("props", props);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Link to={{ pathname: "/Example2", state: { name: "Hello world..." } }}>
        Navigate to Example2
      </Link>
    </div>
  );
};
const Example2 = props => <h1>Hey...{props.location.state.name}</h1>;
function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path={"/example"} render={() => <Example />} />
        <Route path={"/Example2"} render={Example2} />
      </Switch>
      <>
        <Link to={"/example"} params={{ name: "john" }}>
          <button>name</button>
        </Link>
        <Link to={"/example"} params={{ age: "27" }}>
          <button>age</button>
        </Link>
        <Link to={"/example"} params={{ surname: "Travolta" }}>
          <button>surname</button>
        </Link>
      </>
    </BrowserRouter>
  );
}

这是如何通过链接

传递属性的方法

   <Link to={{ pathname: "/Example2", state: { name: "Hello world..." } }}>
       Navigate to Example2
   </Link>

并在导航组件（如果它是功能组件）中这样访问

props.location.state.name

如果是基于类的组件

this.props.location.state.name

Answer 2

您可以使用Link的to属性，并使用props.location.state访问示例组件中的状态。

Codesandbox

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Switch, Route, Link } from "react-router-dom";
import "./styles.css";

const Example = props => {
  console.log("props", props.location.state);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
};

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/example" component={Example} />
      </Switch>
      <>
        <Link to={{pathname:"/example", state: {name: "john"}}} >
          <button>name</button>
        </Link>
        <Link to={{pathname:"/example", state: {age: "27"}}} >
          <button>age</button>
        </Link>
        <Link to={{pathname:"/example", state: {surname: "Travolta"}}}  >
          <button>surname</button>
        </Link>
      </>
    </BrowserRouter>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

如何在React-Router中传递参数

2 个答案: