标签: react-router-v4

这是我的目标.我想创建一个复合组件,它将在显示children元素之前检查匹配的url的有效性.否则,它返回一个公共组件来显示错误消息.

所以这是我的'装饰'的代码:

const EnforceUrlValidation = (test, children) => {
  const fn = ({ match }) => {
    if (! test( match )) {
      return ( <InvalidUrlContainer /> );
    }
    return ({children});
  }
  return fn;
}

它是如何在我的路由器中使用的:

const WelcomePage = EnforceUrlValidation(
    (match) => {
      const articleId = match.params.articleId;
      return articleId && isValidarticleId(articleId);
    }
  , <WelcomeContainer/>
)
...
<Routers>
     <Switch>
          <Route
              path="/:articleId"
              component={WelcomePage}
           />
...

</Routers>

我现在遇到的问题是我仍然希望将match对象传递到children内部EnforceUrlValidation.我怎样才能做到这一点？

尝试1:

const EnforceUrlValidation = (test, children) …

想知道如何使用hashRouter而不是在react-router v4中使用browserRouter返回到反应Web应用程序中的先前路由？

我发现这个问题似乎不起作用,即使它说没有浏览器mixin需要(加上我认为它谈论的是旧的react-router版本)但是,我见过的所有其他解决方案都取决于browserHistory.

是否可以使用hashHistory？

我试图通过实现AsyncCompoment类来在React中延迟加载路由，如创建React App中的代码拆分所述。以下是本教程中的es6 asyncComponent函数：

import React, { Component } from "react";

    export default function asyncComponent(importComponent) {
      class AsyncComponent extends Component {
        constructor(props) {
          super(props);

          this.state = {
            component: null
          };
        }

        async componentDidMount() {
          const { default: component } = await importComponent();

          this.setState({
            component: component
          });
        }

        render() {
          const C = this.state.component;

          return C ? <C {...this.props} /> : null;
        }
      }

      return AsyncComponent;
    }

我已经在打字稿中编写了此函数，并且可以确认组件确实被延迟加载了。我面临的问题是它们没有被渲染。我能够确定componentDidMount挂钩中的组件对象始终是未定义的：

//AsyncComponent.tsx
async componentDidMount() {
              const { default: component } = await importComponent(); …

我正在使用 react-router 将主页上的一组卡片定向到其他单个页面。但是，当我点击卡片时，新页面会在卡片组下方呈现，而我想要的只是呈现新页面。我认为问题可能与我的 App.js 在其中包含主页有关，但我不知道我应该把它放在哪里，是否应该有一个单独的链接等等？我将不胜感激任何帮助！谢谢

这是 App.js 的代码

import React from 'react';
import Routes from '../containers/routes.js';
import ProjectCards from '../containers/project_cards.js';

export default class App extends React.Component {
    render() {
        return(
            <div>
                <ProjectCards />
                <Routes />
            </div>
        );
    }
}

这是主容器：

import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import ProjectCard from '../components/project_card.js';
import Project1 from '../components/project1.js';

class ProjectCards extends React.Component {
    render() {
        var projectCards = this.props.projects.map((project, i) => {
            return ( …

我们的react应用程序可以完美地在开发模式（本地主机）下运行，但是当我们将其放入heroku服务器时，我们无法直接访问路由。当我们执行history.push（{}）到我们的路径时，我们得到一个404页面。

您可以在此处查看页面：placemate.herokuapp.com

重现步骤：转至上面的URL，看到它加载。然后将/ login添加到URL栏，您将看到一个404页面。但是，单击标题中的登录名将正确引导您。

这是我们的路由器代码：

import React from 'react'
import { Switch, Route, Redirect } from 'react-router-dom'
import '../../App.css'
import Home from '../../scenes/general/home/Home'
import Login from '../../scenes/general/login/Login'
import Register from '../../scenes/general/register/Register'
import GuestHeader from '../../components/general/header/Header'

const Main = () => (
  <main className='main_app'>
      <GuestHeader />
      <Switch>
          <Route exact path='/' component={Home}/>
          <Route path='/login' component={Login}/>
          <Route path='/register' component={Register}/>
      </Switch>
    </main>
);

export default Main;

index.js文件：

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

我要获取其中的产品列表ProductList，其中需要将选定的产品对象传递给Product。

目前，我正在尝试将idas作为路由参数传递，并再次获取product对象。但我想将整个产品对象从发送ProductList到Product。

我的路线是

<Route path={joinPath(["/product", ":id?"])} component={Product} />

ProductList组件链接

<Link to={"/product/" + this.props.product.Id} >{this.props.product.Name} </Link>

如何传递产品对象Product作为道具？

下面的代码在Typescript中引发错误，表示LinkType 上不存在以下属性。

<Link to={"/product/" + this.props.product.Id} params={product}>{Name}</Link>

我尝试了以下问题，但似乎没有问题。

• 在Link react-router中传递道具 <--- this is similar to my issue, but answer doesn't work for react-router v4
• react-router-将道具传递给处理程序组件
• 反应：传递属性

是否有可能像大多数社交媒体网站一样做类似的事情

somesite.com/username 但仍有某些路径，如 /login 或 /settings

ReactDOM.render(
    <BrowserRouter>
        <div>
            <Route path="/:id - but not /login or /settings" component={User} />
            <Route path="/login" component={Login} />
            <Route path="/settings" component={Settings} />
        </div>
    </BrowserRouter>, document.getElementById('root')
);

使用精确的建议

<BrowserRouter>
    <div>
        <Route path="/:id" component={User} />
        <Route exact path="/settings" component={Settings} />           

    </div>
</BrowserRouter>, document.getElementById('root')

const User = () => {    
    return (
        <h1>user</h1>
    )
}

const Settings = () => {    
    return (
        <h1>settings</h1>
    )
}

转到 /settings 将显示

用户

设置

我正在学习在Typescript中使用React Router.我也在阅读这篇关于如何在typescript + react路由器中实现PrivateRoutes的文章.

https://tylermcginnis.com/react-router-protected-routes-authentication/

上面的博客有一个代码段来实现PrivateRoute

const PrivateRoute = ({component: Component, ...rest}) => (
   <Route {...rest} render={(props) => (
      isLoggedIn.isAuthenticated === true ? <Component {...props} /> : <Redirect to='/login' />
   )} />
)

但是我的打字稿编译器不喜欢上面的代码

ERROR in [at-loader] ./src/components/Main.tsx:19:35
    TS7031: Binding element 'Component' implicitly has an 'any' type.
Child html-webpack-plugin for "index.html":

如何修改上面的代码,使其成为打字稿友好的？

因此，我尝试在注销页面和重定向到主网站页面之间进行一些延迟。但是，我陷入了问题，该反应路由器-DOM <Redirect/>方法并不想火的时候，我们把它里面setTimeout()的setInterval()。

因此，如果我们将其从计时器中解开，<Redirect/>它将正常工作。

问题是什么，有什么建议吗？

我的代码：

import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';
import axios from 'axios';

class LogoutPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            navigate: false
        }
    }

    componentDidMount(e) {
        axios.get('http://localhost:3016/logout')
        .then(
            this.setState({
                navigate: true
            }),
        )
        .catch(err => {
            console.error(err);
        });

        if (this.state.navigate) {
            setTimeout(() => {
                return <Redirect to="/employers" />
            }, 2000);
        }
    };

    render() {
        if (this.state.navigate) {
            setTimeout(() => …

我正在使用带有Typescript的React，并且需要使用历史记录，因为我需要具有RouteComponentProps的接口

export default class Routes extends Component<RouteComponentProps, any> {
  render() {
   return (
    <div>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/login" component={Login} />
        <ProtectedRoute exact path="/admin" component={Admin} />
      </Switch>
    </div>
  );
 }}

当我将props接口用作RouteComponentProps时，以下代码给我错误。

class App extends Component {
  render() {
   return (
     <Provider>
       <React.Fragment>
         <Navbar />
         <Routes />
       </React.Fragment>
     </Provider>
 );
}
}

当我尝试使用路线组件时出现错误。错误说

类型“ {}”缺少类型“只读”的以下属性：历史记录，位置，匹配项TS2739

请帮助解决此问题