我如何通过Semantic UI的增强功能将道具从react-router-dom传递到Link组件？

Question

我正在创建一个迷你博客，我想点击一篇文章，它将把我引导到一个包含点击卡片数据的URL。

下面是我的 app.js 文件，其中包含路由paths。

我想让spiritualwritingswriting和historicalwritingswriting这两个路径来渲染{Writing}组件，但要把道具传入其中，这样才能渲染出真正的文章。

import React from 'react';
import './App.css';
import LandingPage from  './pages/LandingPage/LandingPage';
import SpiritualWritings from './pages/SpiritualWritings/SpiritualWritings';
import HistoricalWritings from './pages/HistoricalWritings/HistoricalWritings';
import Writing from './pages/Writing/Writing';
import {Route,Router} from 'react-router-dom'
import history from './history';

function App() {
  return (
    <div className = "mainBackground">
      <Router history = {history}>
        <Route path = "/" component = {LandingPage} exact />
        <Route path = "/spiritualwritings" component = {SpiritualWritings} exact/>
        <Route path = "/historicalwritings" component = {HistoricalWritings} exact/>
        <Route path = "/spiritualwritings/writing" component = {Writing} exact/>
        <Route path = "/historicalwritings/writing" component = {Writing} exact/>
      </Router>
    </div>
  );
}

export default App;

下面是我的 SpiritualWritings.jsx 源码

import React,{Component} from 'react';
import './SpiritualWritings.css';
import SiteHeader from '../../components/SiteHeader/SiteHeader';
import Footer from '../../components/Footer/Footer';
import {Grid,Card,Icon,Transition} from 'semantic-ui-react';
import { Link } from 'react-router-dom';



export default class SpiritualWritings extends Component{

    state = {
        open : false
    }

    componentDidMount(){
        this.setState({
            open: true
            }
        )
    }


    render () {
        var articles = Array(15).fill({
            header: "Article",
            meta : "Date",
            description : "Quick Summary",
            content: "This is the actual content"
        })

        var auth = true;

        var cardArray = articles.map((data,index) => (
            <Transition
                animation = "vertical flip"
                duration = {500+index*100}
                visible = {this.state.open}
            >
                <Card link color = {"blue"} as = {Link} to = "/spiritualwritings/writing">
                    <Card.Content textAlign = {"center"}>
                        <Card.Header>
                            {data.header + " " + index}
                        </Card.Header>
                        <Card.Meta>
                            {data.meta + " " + index}
                        </Card.Meta>
                        <Card.Description>
                            {data.description + " " + index}
                        </Card.Description>
                    </Card.Content>
                </Card>
            </Transition>
        ))

        if (auth){
            cardArray.unshift(
                <Card link color = {"green"}>
                    <Card.Content textAlign = {"center"}>
                        <Card.Header >
                            Submit a New Writing
                        </Card.Header>
                    </Card.Content>
                    <Card.Content textAlign = {"center"} extra>
                            <Icon.Group size = {"big"}>
                                <Icon color = {"green"} name = {"pencil alternate"} />
                                <Icon color = {"green"} corner = {"bottom right"} name = {"plus"}/>
                            </Icon.Group>
                    </Card.Content>
                </Card>
            )
        }

        return(
            <Grid stackable padded = {"vertically"} className = "spiritualPageGrid">
                <SiteHeader></SiteHeader>
                <div className = "spiritualPageMainRow">
                    <Card.Group stackable itemsPerRow = {6}>
                        {cardArray}
                    </Card.Group>
                </div>
                <Footer></Footer>
            </Grid>
        )
    }

}

我所关注的行是。

<Card link color = {"blue"} as = {Link} to = "/spiritualwritings/writing">

我的目标是点击一张卡片，并把它所包含的数据传给{链接}，这样我的目标就是： Writing.jsx 文件可以渲染文章。

下面是我的 Writing.jsx 源代码。我只写了最基本的东西，但我需要某种方法从 SpiritualWritings.jsx

import React from 'react';
import './Writing.css';
import SiteHeader from '../../components/SiteHeader/SiteHeader';
import Footer from '../../components/Footer/Footer';
import {Grid} from 'semantic-ui-react';



function Writing(){



    return(
        <Grid padded = {"vertically"} className = "writingPageGrid">
            <SiteHeader></SiteHeader>
            <Grid.Row className = "writingPageMainRow">
                ARTICLE CONTENT HERE
            </Grid.Row>
            <Footer></Footer>
        </Grid>
    )
}

export default Writing;

Answer 1

你可以使用react-router-dom这样的重定向。

this.state = {
    redirect: false,
    data: null
}

redirectToWriting = (data) => {
    this.setState({
        redirect: true,
        data
    })
}

render(){
    if (redirect) {
        return <Redirect to={{
            pathname: "/spiritualwritings/writing",
            state: { this.state.data }
        }}
        />
    }
    var cardArray = articles.map((data, index) => (
        <Transition
            animation="vertical flip"
            duration={500 + index * 100}
            visible={this.state.open}
        >
            <Card link color={"blue"} onClick={() => this.redirectToWriting(data)}>
                <Card.Content textAlign={"center"}>
                    <Card.Header>
                        {data.header + " " + index}
                    </Card.Header>
                    <Card.Meta>
                        {data.meta + " " + index}
                    </Card.Meta>
                    <Card.Description>
                        {data.description + " " + index}
                    </Card.Description>
                </Card.Content>
            </Card>
        </Transition>
    ))

    return (
        //your rest of code
    )
}

并在你的子组件（写作组件），你可以得到的数据作为

console.log(this.props.location.state)