标签: react-router-v4

我有这个PrivateRoute组件(来自文档):

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

我想改成isAuthenticatedaysnc请求isAuthenticated().但是,在响应返回之前,页面重定向.

为了澄清,该isAuthenticated功能已经建立.

在决定显示什么之前,我该如何等待异步调用完成？

我得到这个错误尝试不同的路由方式仍然没有运气.

我有路由配置文件,即route.js

const Root = ({ store }) => (
    <Provider store={store}>
        <BrowserRouter>
            <div>
                <Route path='/' component={ App }/>  
            </div>
        </BrowserRouter>
    </Provider>
)

现在在App.js

class AppComp extends Component {
    render() {
        const {match} = this.props;
        let navClass = 'active';

        if(this.props.sideClass === "nav-ssh") {
            navClass = "active-ssh"; 
        }

        return (
            <div>
                <div className="container">
                    <div className="main">
                        <Route render={()=><Header sideNavClass={this.props.sideNavClass} />} />
                        <Route render={()=><SideNav navActiveClass={navClass} currentLocation={this.props.location.pathname} />}/>
                        <Redirect to="/home/dashboard" />s
                    </div>
                </div>
            </div>
        );
    }
}

我想加载应用程序,所以把它放在最高级别,标题和sidenav也应该总是加载,所以他们在应用程序内.

对于任何未知路径和第一次加载,我重定向到/ home/dashboard

我明白它必须要/两次所以这个警告.

如何配置我的路由器以实现相同并解决警告.

任何帮助将不胜感激.

全新的反应,尝试在"登录"页面上单击提交后重定向到"主页".试图按照路由器反应教程.

当我单击表单和控制台上的提交按钮记录状态和fakeAuth.isAuthenticated时,它们都返回true.但是,重定向未触发.

Login.js

class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            portalId: "",
            password: "",
            redirectToReferrer: false
        }

        this.handleSubmit = this.handleSubmit.bind(this);
    }


    handleSubmit(e) {
        fakeAuth.authenticate(() => {
            this.setState({
                portalId: this.refs.portalId.value,
                password: this.refs.password.value,
                redirectToReferrer: true
            })
        })
        e.preventDefault();
    }


    render() {
        const redirectToReferrer = this.state.redirectToReferrer;
        if (redirectToReferrer === true) {
            <Redirect to="/home" />
        }

Routes.js

export const fakeAuth = {
    isAuthenticated: false,
    authenticate(cb) {
        this.isAuthenticated = true
        setTimeout(cb, 100)
    },
    signout(cb) {
        this.isAuthenticated = false
        setTimeout(cb, 100)
    } …

我有一个使用reactstrap(bootstrap4)的反应应用程序.我使用react-router为导航创建了一个简单的布局.我无法弄清楚为什么导航栏项目会在您单击时闪烁.我正在使用来自react-router-dom的内置NavLink,它可以突出显示所选的NavItem.

这是网站网站的链接

标题组件

import {
  Collapse,
  Navbar,
  NavbarToggler,
  Nav,
  NavItem,
  NavbarBrand,
  NavLink } from 'reactstrap'
import { NavLink as RRNavLink } from 'react-router-dom'

const Item = ({link, label}) => (
  <NavItem>
    <NavLink exact activeClassName='active-tab' to={link} tag={RRNavLink}>{label}</NavLink>
  </NavItem>
)

const ROUTES = []

export default class extends React.Component {
  render () {
    return (
      <div className='header-bkg'>
        <Navbar color='faded' light expand='md'>
          <NavbarBrand className='text-white'>Star Designs</NavbarBrand>
          <NavbarToggler onClick={this._onToggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className='ml-auto' navbar>
              {ROUTES.map((x, i) => (
                <Item key={i} {...x} …

关于未解决的问题(作为最终结论)

• react-router-dom v4中的多个嵌套路由
• 如何在React Router v4中嵌套路由？

我也遇到了同样的问题.

https://reacttraining.com/react-router/web/guides/quick-start promotereact-router-dom

此外,人们list down routes在一个文件而不是内部组件中找到更好的结果.

引用的内容: https ://github.com/ReactTraining/react-router/tree/master/packages/react-router-config

工作的东西(大多数):

import * as React from 'react'
import {BrowserRouter as Router, Route, Switch } from 'react-router-dom'


export const Routes = () => (
  <Router>
    <div>
      <Switch>
        <Route exact path="/login" component={Login}/>
        <MainApp path="/">
          <Route path="/list" component={List}/>
          <Route path="/settings" component={Settings}/>
        </MainApp>
        <Route path="*" component={PageNotFound}/>
      </Switch>
    </div>
  </Router>
)

有些东西不起作用: site.com/SomeGarbagePath 显示<MainApp>我认为.
<Route path="*" component={PageNotFound}/>

更新

/ - Home - parent of …

我的高阶组件有问题.我试图从<Layout />路由中的组件传递道具(React Router v4).路由中指定的组件由HOC包装,但我传递的道具永远不会到达组件.

另外,我不能在不使用的情况下使用HOC export default () => MyHOC(MyComponent).我无法弄清楚为什么,但这可能与它有关？

Layout.js

const Layout = ({ location, initialData, routeData, authenticateUser }) => (
  <Wrapper>
    <Container>
        <Switch>
          // how do I get these props passed through the HOC? render instead of component made no difference.
          <Route exact path="/pages/page-one" component={() => <PageOne routeData={routeData} title="PageOne" />} />
          <Route exact path="/pages/page-two" component={() => <PageTwo routeData={routeData} title="PageTwo" />} />
          <Route component={NotFound} />
        </Switch>
    </Container>
  </Wrapper>
)

export default Layout

Page.js

// I've tried …

我正在尝试使用https://github.com/facebook/prop-types

所以我也为它安装了@ types/prop-types.https://www.npmjs.com/package/@types/prop-types

但我想这个错误.[ts]模块'"/ node_modules/@ types/prop-types/index"'没有默认导出.

我想要完成的是在withRouter文档中做了什么. https://reacttraining.com/react-router/web/api/withRouter

例如,您在JavaScript中看到PropTypes的使用:

import React from 'react'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router'

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }

  render() {
    const { match, location, history } = this.props

    return (
      <div>You are now at {location.pathname}</div>
    )
  }
}

// Create a new component that is …

我正在尝试为我的React应用程序使用路由器.我尝试了一段时间以来一直在使用的东西,但似乎无法实现.已hashHistory在React Router v4中删除/重新格式化？

<Router history={hashHistory}>
  <Route path='/' component={MainContainer} />
</Router>

我的反应路由器工作正常..但我想您可以通过日期Path作为title其预期的字符串。

  <Route exact path="/meeting/:date"
              breadcrumb="Meetings"
              title={DATE}
              component={(props) => (
                <FooComponent
                  date={props.match.params.date} />
              )}
            />

谢谢

我有一个这样的路由器：

<Route path="/blog/:date/:folder" render={(props: any) => <Home />

它适用于：

http://localhost/blog/2017-05-20/test

但是，:folder可以有斜杠（子目录），我想一次解析文件夹中的所有路径。

这不是工作：

http://localhost/blog/2017-05-20/test/sub/dir

在这种情况下，我只得到test. 我想:folder作为test/sub/dir一个整体。

有没有办法用 React Router 实现这一点？

预期：

:date => '2017-05-20'
:folder => 'test/sub/dir'

实际的：

:date => '2017-05-20'
:folder => 'test'