Question

我正在构建带有react-router-dom（v4.3.1）的react-app（v16.4.2）。在定义链接并通过状态作为链接的一部分之后，该信息仅在上下文中可用，而在props中不可用。发生了什么？如何在上下文中访问信息？或将路线信息移至道具？

Index.JS

export default App;

App.JS

return <div className="information">
            <Button className="btn btn-block contacts-btn " onClick={() => this.toggle()}>Facility Landowner</Button>
            <div id="demo" className={"collapse" + (this.state.open ? ':not(.show)' : '')}>

                <div className="information">
                    No Landowner information exists for this facility. <Link to={{
                        pathname: `/facilities/contacts/${this.props.id}`,
                        state: { facilityName: this.props.facility.facilityName }
                    }}
                        className="hyperlinks"> Create A New Contact</Link>
                </div>
            </div>
        </div>

} }

.something {
  background-image: url('../images/image.jpeg');
}

@font-face {
  font-family: 'YourFontName';
  src: url('../fonts/OpenSans-Bold.ttf');
}

我要传递的代码：

const path = require("path");
const glob = require('glob')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const PurgecssPlugin = require('purgecss-webpack-plugin')
const HtmlWebpackPlugin = require("html-webpack-plugin");
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");

const PATHS = {
    src: path.join(__dirname, 'src')
}

module.exports = {
    optimization: {
        splitChunks: {
            cacheGroups: {
                styles: {
                    name: 'styles',
                    test: /\.css$/,
                    chunks: 'all',
                    enforce: true
                }
            }
        }
    },
    entry: "./src/index.js",
    output: {
        path: path.join(__dirname, "/dist"),
        filename: "index-bundle.js",
        publicPath: 'https://cdn.com/',
    },
    resolve: {
        extensions: ['.js', '.jsx'],
    },
    module: {
        rules: [{
            test: /\.jsx?$/,
            use: [{
                loader: 'babel-loader',
                options: {
                    plugins: ['transform-react-remove-prop-types'],
                },
            }],
        },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ["babel-loader"]
            },
            {
                test: /\.scss$/,
                use: [
                    "style-loader",
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader"
                ]
            }, {
                test: /\.(png|jpg|gif|svg|jpeg|eot|ttf|woff)$/i,
                use: [{
                    loader: 'file-loader',
                    options: {
                        outputPath: 'images/',
                        name: '[name].[ext]',
                    }
                }],
            }
        ]
    },
    plugins: [
        new FixStyleOnlyEntriesPlugin(),
        new MiniCssExtractPlugin({
            filename: "[name].css",
        }),
        new PurgecssPlugin({
            paths: glob.sync(`${PATHS.src}/**/*`, {nodir: true}),
        }),
    ]
};

反应工具视图：

Answer 1

在使用render props method渲染组件时，您需要在回调函数中获取router道具作为参数。您需要将其传递给组件以作为组件中的道具访问Router道具

class App extends Component {
   render() {
      return (
          <Provider store={store}>
            <Router>
              <div>
                 <Header />
                <div className="container-fluid">
              <Route exact path="/" component={FacilitySearch} />
              <Route exact path="/facilities" render={(props) => <FacilitySearch {...this.props} {...props} />} />
              <Route exact path="/facilities/:id" render={(props) => <FacilityInfo id={props.match.params.id} {...this.props}  {...props}/>} />
              <Route exact path="/facilities/contacts/:id" render={(props) => <FacilityContactsForm id={props.match.params.id} {...this.props} {...props} />} />
              <Route exact path="/facilities/permits/:id" render={(props) => <PermitInfo id={props.match.params.id} {...this.props} {...props}/>} />
              <Route exact path="/facilities/reports/:id" render={(props) => <ReportInfo id={props.match.params.id} {...this.props} {...props} />} />
            </div>
            <Footer />
          </div>
        </Router>
      </Provider>
    );
  }
}

为什么React Router位置道具仅在上下文中可用？

1 个答案: