我如何通过语义 UI 的扩充将道具从 react-router-dom 传递到 Link 组件？

Question

我正在创建一个迷你博客，我想点击一篇文章，这会将我定向到一个 url，其中包含来自已点击卡片的数据。

这是我的 app.js 文件，其中包含 routes/paths.

我希望路径 /spiritualwritings/writing 和 /historicalwritings/writing 呈现 {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">

我的目标是点击卡片，并将其包含的数据传递给 {Link}，以便我的 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)

我如何通过语义 UI 的扩充将道具从 react-router-dom 传递到 Link 组件？

How can I pass props to a Link component from react-router-dom via Semantic UI's augmentation?

reactjs

semantic-ui

semantic-ui-react