Передайте переменную на компонентные реквизиты Route в 'response-router-dom'

Question

Я использую реагирование, Как я могу отправить реквизиты на компонент Home, который вызывается только как значение параметра компонента Route в react-router-dom, у меня есть переменная с именем sample, и я хочу вызвать ее значениевнутри класса домашних компонентов, например const sample = this.props.sample как я могу это сделать в этом случае?

import React, { Component } from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import ReactDOM from 'react-dom';

import Login from './components/Login';
import Home from './components/Home';
const sample = 'send this to home component';

class App extends Component {
  render() {
    return (
      <Router history={history}>
        <Switch>
          <div>
            <Route exact path="/" component={Login} /> 
            <Route path="/login" component={Login} />
            <Route path="/home" component={Home} />
          </div>
        </Switch>
      </Router>
    );
  }
}

export default App;

Answer 1

Вы можете создать новый компонент, который сочетает в себе маршрутыоминер-роутера и некоторую собственную логику.

import React from "react"
import { Route, Redirect } from "react-router-dom"

const CustomRoute = ({ component: Component, sample, ...rest}) => {
    return(
        <Route 
            {...rest}
            //route has a render prop that lets you create a component in-line with the route
            render = {props =>
                sample === true ? (
                    <Component {...props} />
                ) : (
                    <Redirect to="/login"/>
                )
            }
        />
    )
}

export default CustomRoute

Затем импортируйте свой компонент CustomRoute и поменяйте с ним ваш домашний маршрут.

<CustomRoute path="/home" component={Home} sample={sample}/>

Answer 2

В вашем случае я бы сказал проще:

<Route path="/home" render={ () => <Home sample={ sample && sample }/> } /> // sample && sample checks that the variable is not undefined

Я бы сказал, что это предпочтительный метод, если вы хотите просто пройти один или несколько подпорок.