我试图使用TypeScript <PrivateRoute>在react-router 文档中创建一个as describe .谁能帮我吗？

react-router文件中的privateRoute:

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    fakeAuth.isAuthenticated ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{pathname: '/login', state: { from: props.location }
   }}/>
  )
 )}/>
)

下面是我的TypeScript版本(它不起作用):

const PrivateRoute = (theProps: { path: string, component: React.SFC<RouteComponentProps<any> | undefined> | React.ComponentClass<RouteComponentProps<any> | undefined> }) => {
    return <Route path={theProps.path} render={props => (
        fakeAuth.isAuthenticated ? (
            <React.Component {...theProps} /> <!-- **** It will raise error …

当用户在浏览器选项卡中手动更改路径并按Enter键时,我遇到了问题.这会强制我的反应路由器导航到用户输入的状态.我想阻止这种情况,并且只允许通过我在网站上点击按钮实现的流程进行路由.

我的某些屏幕需要的数据仅在用户使用预期的流量导航网站时才可用.如果用户通过手动更改URL中的路径直接尝试导航到特定路线,那么他可能会跳过所需的流程,因此应用程序将中断.

其他情况,如果我想限制一些用户访问某些路由,但用户知道路径并在浏览器URL中手动输入,那么他将被呈现该屏幕,但不应该.

我使用react-router-dom并构建了我的反应应用程序。当我在服务器上部署它时，我得到一个空白页面并且控制台是空的。

我的 App.js 是：

import React, { Component } from 'react';
import { Route, Switch, BrowserRouter} from 'react-router-dom';
import Agenda from './components/Agenda/Agenda';
import Planning from './components/Planning/Planning';
class App extends Component {
  render() {
    return (
      <div>
        <BrowserRouter  basename="/">
          <Switch>
            <Route exact path="/"  component={Agenda} />
            <Route path="/planning" component={Planning} />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

export default App;

我的 index.js 是：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
        <App/>
, document.getElementById('root'));

我的 index.html …

我正在使用 React Router 并且有两条路由呈现相同的组件：

<Switch>
    <Route path="/aaa" component={Cmp} />
    <Route path="/bbb" component={Cmp} />
</Switch>

这是 Cmp 实现：

class Cmp extends Component {
    componentWillUnmount() {
        console.log('******************* UNMOUNTED');
    }

    render() {
        return null;
    }
}

正如我所料，在/aaa和之间导航/bbb并不会卸载 Cmp。

我正在使用钩子，所以我重写了组件：

function Cmp() {
    useEffect(() => {
        return () => {
            console.log('******************* UNMOUNTED');
        };
    });

    return null;
}

而且很奇怪的是，在运行应用程序时，之间导航/aaa和/bbb执行console.log是CMP已卸载。
知道如何使用函数组件和钩子防止不必要的卸载吗？

我希望console.log('Refresh')每次路由更改时都会运行（从 Component1 切换到 Component2）。但它仅在第一次渲染时触发。为什么？

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));

App.js：

import React, { useEffect } from 'react';
import { Switch, Route } from 'react-router-dom';
import Nav from './Nav';
import Component1 from './Component1';
import Component2 from './Component2';

const App = () => {

  useEffect( () => console.log('Refresh'));

  return (
        [<Switch>
            <Route                            component = {Nav}/>
        </Switch>,
        <Switch>
            <Route exact path = …

我是相对较新的反应,我正在试图弄清楚如何让React路由器工作.我有一个超级简单的测试应用程序,看起来像这样:

import React from 'react';
import ReactDOM from 'react-dom';

import {BrowserRouter as Router, Route, Switch, IndexRoute, Link} from 'react-router-dom';

const Home = () => <h1><Link to= "/about">Click Me</Link></h1>
const About = () => <h1>About Us</h1>

const Test = () => (
  <Router>
    <Switch>
    <Route path ="/" component = {Home} />
    <Route path ="/about" component = {About} />
    </Switch>
  </Router>
)

ReactDOM.render(<Test />, document.getElementById('app'));

当我运行应用程序时,主组件加载没有任何麻烦,当我点击"点击我"链接时,网址更改为localhost/about,但没有任何反应.如果我点击刷新,我会得到一个"无法获取/关于".显然,我做错了什么,但我无法弄清楚是什么.我也在使用Webpack.

与Redux连接后,示例https://reacttraining.com/react-router/web/example/auth-workflow中的 PrivateRoute无效.

我的PrivateRoute看起来与原始版本几乎相同,但只连接到Redux并在原始示例中使用它而不是fakeAuth.

const PrivateRoute = ({ component: Component, auth, ...rest }) => (
  <Route
   {...rest}
   render={props =>
   auth.isAuthenticated
    ? <Component {...props} />
    : <Redirect to={{ pathname: "/login" }} />}
  />
);

 PrivateRoute.propTypes = {
  auth: PropTypes.object.isRequired,
  component: PropTypes.func.isRequired
 }

 const mapStateToProps = (state, ownProps) => {
  return {
     auth: state.auth
  }
};

export default connect(mapStateToProps)(PrivateRoute);

用法和结果: -

1. 不工作,但希望和期望工作
   • <PrivateRoute path="/member" component={MemberPage} />
2. 工作,但不希望像这样使用
   • <PrivateRoute path="/member" component={MemberPage} auth={auth} />
3. 工作.只是工作,但根本不想使用.从这一点可以理解,如果你将原始的PrivateRoute连接到Redux,你需要传递一些额外的道具(任何道具)来使PrivateRoute工作,否则它不起作用.任何人,请对这种行为给出一些暗示.这是我的主要问题
   • <PrivateRoute path="/member" component={MemberPage} …

我正在使用React Router RouteComponent 实现私有路由:

function PrivateRoute({component: Component, authed, emailVerified, ...rest}) {
  return (
    <Route
      {...rest}
      render={props =>
        authed === true
          ? <Component {...props} />
          : <Redirect to={{pathname: '/', state: {from: props.location}}} />}/>
  )
}

预期行为:

authed 通过使用redux-persist So页面刷新或重新加载来保持页面刷新,如果authed是,true那么路由器应该渲染<Component />而不会去路径"/"

实际行为是问题:

使用authed === true(持久)重新加载页面或刷新它会导致执行以下操作(检查redux devtools)操作: "@@router/LOCATION_CHANGE"运行并将其带到正确的安全路由,然后"@@router/LOCATION_CHANGE"再次运行并重新定向到"/"片刻,最后 "@@router/LOCATION_CHANGE"再次运行并将路线引导回安全路径,即使authed === true通过所有这些redux devtools

然后: 我的猜测是,这个错误与我的主要App组件渲染有关,之后redux-persist有时间重新补充Redux存储.

所以我尝试了以下操作:

我尝试延迟我的主要App …

什么之间的区别props.location.pathname和props.match.url

在react-router-dom？

从他们的文档：https : //reacttraining.com/react-router/web/api/location

匹配.url

（字符串）URL 的匹配部分。用于构建嵌套<Link>s

地点

用于匹配子元素而不是当前历史位置（通常是当前浏览器 URL）的位置对象。

到目前为止，我见过它们具有完全相同的值。

例子：

如果我的路线在这个网址中匹配：

/search/searchValue?category=whatever

我想删除查询字符串并转到：

/search/searchValue

我应该使用一个而不是另一个还是它们都可以工作？

我有以下网址: http://localhost:4400/skills/3

在我的反应组件中,我有:

  constructor(props) {
    super(props);
    this.state = { skill_id: props.match.params.skill_id };
  }

....

const mapStateToProps = (state, ownProps) => {
  return {
    skill_id: state.skill_id,
    ratingsBySkillId: state.rating.by_skill_id.find(el => el.skill_id === skill_id)
  };
};

state.skill_idmapStateToProps中没有问题？为什么？我如何在mapStateToProps中使用params？

谢谢