Reactjs - 如何将道具传递给路由？

Question

我正在使用 React-Router-Dom 学习 React Navigation。我创建了一个简单的应用程序来说明问题：

在 App.js 内部我有一个 Route，它指向 url “/” 并加载功能组件 DataSource.js。

在 DataSource.js 中，我有一个变量名为“John”的状态。还有一个按钮，onclick 指向一个类方法，该方法应该使用 Route 加载名为 ShowData.js 的无状态组件。

ShowData.js 接收 props.name。

我要做的是：当点击DataSource.js中的按钮时，url变为“/showdata”，ShowData.js被加载并显示DataSource.js接收到的props.name，以及DataSource。 js 消失了。

App.js

import './App.css';
import {Route} from 'react-router-dom'
import DataSource from './containers/DataSource'
function App() {
  return (
    <div className="App">
      <Route path='/' component={DataSource}/>
    </div>
  );
}

export default App;

数据源.js

import React, { Component } from 'react';
import ShowData from '../components/ShowData'
import {Route} from 'react-router-dom'
class DataSource extends Component{
    state={
        name:' John',
    }

    showDataHandler = ()=>{
        <Route path='/showdata' render={()=><ShowData name={this.state.name}/>}/>
    }

    render(){
        return(
            <div>
                 <button onClick={this.showDataHandler}>Go!</button>                
            </div>           
        )
    }
}

export default DataSource;

显示数据.js

import React from 'react';

const showData = props =>{
    return (
        <div>            
            <p>{props.name}</p>
        </div>
    )
}

export default showData;

我尝试了以下方法，但是，即使 url 确实更改为“/showdata”，DataSource 组件也是唯一呈现到屏幕上的东西：

数据源.js

showDataHandler = ()=>{
        this.props.history.push('/showdata')
    }

    render(){
        return(
            <div>
                 <button onClick={this.showDataHandler}>Go!</button>    
                 <Route path='/showdata' render={()=>{<ShowData name={this.state.name}/>}}/>     
            </div>           
        )
    }

我也尝试了以下方法，但单击按钮时没有任何变化：

数据源.js

 showDataHandler = ()=>{
        <Route path='/showdata' render={()=>{<ShowData name={this.state.name}/>}}/>
    }

    render(){
        return(
            <div>
                 <button onClick={this.showDataHandler}>Go!</button> 
            </div>           
        )
    }

如何使用 DataSource.js 中的嵌套 Route 将 prop 传递给另一个组件？

谢谢。

编辑：正如用户 Sadequs Haque 所指出的那样，当您通过 url 传递该道具时，可以检索道具，例如“/showdata/John”，但这不是我想做的：我'希望 url 只是'/showdata/'。

他还指出，可以有条件地渲染 DataSource 或 ShowData，但这不会将 url 从 '/' 更改为 '/showdata'。

Answer 1

有多个问题需要解决，这个解决方案可以按您的意愿工作。

App.js 应该有所有的路线。我使用 Route 参数将道具传递给 ShowData。所以，/showdata/value 会将value 作为参数传递给ShowData 并渲染ShowData。然后用 BrowserRouter 包装路由。然后使用精确的路线将/ 指向DataSource，否则DataSource 仍会呈现为/showdata/:name 具有/

DataSource.js 将简单地将Link 按钮指向相应的Route。您将使用适当的值填充DataSourceValue。

ShowData.js 将从路由器属性中读取并显示值。我从 props 对象的 console.log() 中找出了路由器参数的对象结构。最终变成了props.match.params

App.js

import { BrowserRouter as Router, Route } from "react-router-dom";
import DataSource from "./DataSource";
import ShowData from "./ShowData";
function App() {
  return (
    <div className="App">
      <Router>
        <Route exact path="/" component={DataSource} />
        <Route path="/showdata/:name" component={ShowData} />
      </Router>
    </div>
  );
}

export default App;

DataSource.js

import React, { Component } from "react";
import ShowData from "./ShowData";
class DataSource extends Component {
  state = {
    name: " John",
    clicked: false
  };

  render() {
    if (!this.state.clicked)
      return (
        <button
          onClick={() => {
            this.setState({ name: "John", clicked: true });
            console.log(this.state.clicked);
          }}
        >
          Go!
        </button>
      );
    else {
      return <ShowData name={this.state.name} />;
    }
  }
}

export default DataSource;

ShowData.js

import React from "react";

const ShowData = (props) => {
  console.log(props);

  return (
    <div>
      <p>{props.name}</p>
    </div>
  );
};

export default ShowData;

这是我在 CodeSandbox 上的脚本。 https://codesandbox.io/s/zen-hodgkin-yfjs6?fontsize=14&hidenavigation=1&theme=dark

Answer 2

我想通了。无论如何，至少有一种方法。

首先，我在 App.js 中添加了到 ShowData 组件的路由，以便 ShowData 可以访问路由器道具。我还包括精确到 DataSource 路由，因此在呈现 ShowData 时不会显示它。

App.js

import './App.css';
import {Route} from 'react-router-dom'
import DataSource from './containers/DataSource'
import ShowData from './components/ShowData'
function App() {
  return (
    <div className="App">
       <Route exact path='/' component={DataSource}/>
      {/* 1. add Route to ShowData */}
      <Route path='/showdata' component={ShowData}/>
    </div>
  );
}

export default App;

在 DataSource 中，我修改了 showDataHandler 方法来推送我想要的 url，并添加了一个查询参数。

数据源.js

import React, { Component } from 'react';

class DataSource extends Component{
    state={
        name:' John',
    }

    showDataHandler = ()=>{
        this.props.history.push({
          pathname:'/showdata',
          query:this.state.name
        })
    }

    render(){
        return(
            <div>
                 <button onClick={this.showDataHandler}>Go!</button>                
            </div>           
        )
    }
}

export default DataSource;

最后，我将 ShowData 修改为 Class，因此我可以使用 state 并可以访问 ComponentDidMount（如果您不想将其更改为 Class，我想也可以在这里使用挂钩）。

在 ComponentDidMount 中，我获取查询参数并更新状态。

显示数据.js

import React, { Component } from 'react';

class ShowData extends Component{

  state={
    name:null
  }

  componentDidMount(){
    this.setState({name:this.props.location.query})
  }

  render(){
    
    return (
      <div>            
          <p>{this.state.name}</p>
      </div>
    )
  }    
}

export default ShowData;

现在，当我单击按钮时，url 变为“/showdata”（并且只有“/showdata”）并显示道具名称。

希望这对某人有所帮助。谢谢。