代码之家 › 专栏 › 技术社区 › Shivam Sahil

如何在React JS的route组件元素中传递道具?

reactjs

Shivam Sahil · 技术社区 · 6 年前

app.js 看起来像:

import React from 'react';
import StarterScreen from './components/StarterScreen.jsx';
import LoginScreen from './components/LoginScreen.jsx';
import RegisterScreen from './components/RegisterScreen.jsx';
import DisplayScreen from './components/DisplayScreen.jsx';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import {BrowserRouter,Route,Switch} from 'react-router-dom';
  return function App(){
    <div className="App">
    <BrowserRouter>
    <Switch>
    <Route component={StarterScreen} exact path="/"></Route>
    <Route component={RegisterScreen} exact path="/register"></Route>
    <Route component={LoginScreen} exact path="/login"></Route>
    <Route component={DisplayScreen} exact path="/login-props-test"></Route>
    </Switch>
    </BrowserRouter>
    </div>
  );
}

export default App;

在代码中传递props.isLoggedIn <Route component={DisplayScreen} exact path="/login-props-test"></Route> . <DisplayScreen isLoggedIn={true} /> 但我怎么才能通过这个 Route component 元素?
功能如下:

function checkLogin(props)
{
  if(props.Authentication===true)
      props.history.push('/login-props-test'); 
}

0 回复 | 直到 6 年前

Geku 6 年前

首先,创建一个充当路由包装器的组件。

import React from "react";
import PropTypes from "prop-types";
import { Route, Redirect } from "react-router-dom";
import { useAuthContext } from "services/auth-provider";

const PrivateRoute = ({ component, ...options }) => {
  const { accessToken } = useAuthContext();

  if (!accessToken) {
    return <Redirect to={{ pathname: "/login" }} />;
  }
  return <Route {...options} component={component} />;
};

PrivateRoute.defaultProps = {};

PrivateRoute.propTypes = {
  component: PropTypes.elementType.isRequired
};

export default PrivateRoute;

按照这种方法,如果登录页没有经过身份验证或者令牌无效(或者您想检查的任何条件),并且完全可重用,您可以重定向到登录页。

const Router = () => (
  <BrowserRouter>
    <Switch>
      <Route component={StarterScreen} exact path="/"></Route>
      <Route component={RegisterScreen} exact path="/register"></Route>
      <Route component={LoginScreen} exact path="/login"></Route>
      <PrivateRoute component={DisplayScreen} exact path="/login-props-test"></PrivateRoute>
    </Switch>
  </BrowserRouter>
);

Pranav Agarwal 6 年前

就用这个吧

import React from 'react';
import StarterScreen from './components/StarterScreen.jsx';
import LoginScreen from './components/LoginScreen.jsx';
import RegisterScreen from './components/RegisterScreen.jsx';
import DisplayScreen from './components/DisplayScreen.jsx';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import {BrowserRouter,Route,Switch} from 'react-router-dom';
  return (
    <div className="App">
    <BrowserRouter>
    <Switch>
    <Route component={()=> <StarterScreen your_prop={here} />} exact path="/"></Route>
    <Route component={()=> <RegisterScreen your_prop={here} />} exact path="/register"></Route>
    <Route component={()=> <LoginScreen your_prop={here} />} exact path="/login"></Route>
    <Route component={()=> <DisplayScreen your_prop={here} />} exact path="/login-props-test"></Route>
    </Switch>
    </BrowserRouter>
    </div>
  );
}

export default App;

更改的代码为:

<Switch>
    <Route component={()=> <StarterScreen your_prop={here} />} exact path="/"></Route>
    <Route component={()=> <RegisterScreen your_prop={here} />} exact path="/register"></Route>
    <Route component={()=> <LoginScreen your_prop={here} />} exact path="/login"></Route>
    <Route component={()=> <DisplayScreen your_prop={here} />} exact path="/login-props-test"></Route>
</Switch>

<Switch>
      <Route exact path="/">
          <StarterScreen your_prop={here} />
      </Route>
      <Route exact path="/register">
          <RegisterScreen your_prop={here} />
      </Route>
      <Route exact path="/login">
          <LoginScreen your_prop={here} />
      </Route>
      <Route exact path="/login-props-test">
          <DisplayScreen your_prop={here} />
      </Route>
</Switch>