如何在React路由器中传递道具

Question

我有一个App，一个Navbar和一个Content类，我正在尝试将一个道具从navbar传递到当我重定向到内容页面时将呈现的内容。

App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Navbar from './components/Home/Navbar';
import Content from './components/Home/Content';

export default class App extends Component {

  render() {
      return (
        <Router>
            <div>
              <Navbar />
              <Route path="/content" component={Content} render={(props) => <Navbar {...props} test={this.state.test} />} />
            </div>
        </Router>
    );
  }
}

Navbar.js

import React from 'react';

class Navbar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            test: 'test',
        }
    }

    render() {
        return (

            <div>
                This is my navbar
            </div>

        );
    }
}

export default Navbar;

Content.js

import React from 'react';

class Content extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            x: 'x',
            test: this.props.test
        }
    }

    render() {
        return (

            <div>
                <p>{this.state.x}</p>
                <p>{this.state.test}</p>
            </div>

        );
    }
}

export default Content;

我遇到的问题是，当我重定向到内容页面时，没有将navbar类的状态传递给它。我该如何解决？

Answer 1

问题主要在于您在component中同时使用render和Route道具的事实，应该只使用一个。如果您不想在定义Route的位置进行更改或传递任何内容，则应使用component属性。

如果您确实希望在那时传递一些信息，请像完成操作一样使用render道具（但是，我相信您确实想呈现Content组件而不是{{ 1}}，就像在您的OP中一样

NavBar

然后，您实际上不需要显示的任何本地状态，而内容可以是功能组件，例如

<Route path="/content" render={(props) => <Content {...props} test={this.state.test} />} />

其中const Content = ({ x, test }) => ( <> <p>{ x }</p> <p>{ test }</p> </>); 和x将从道具中解构，使您可以轻松访问它（您也可以使用test然后使用(props)和{{1} }，具体取决于您喜欢的写作方式

Answer 2

u可以通过redirect传递这样的状态：

<Redirect to={{
            pathname: '/content',
            state: { test: '123' }
        }}
/>

并用于访问它：

this.props.location.state.test