标签: react-router-v4

我找到了这个(reacttraining.com)网站,它用一些例子解释了react-router.但是我无法用打字稿类做到这一点.我想要做的是扩展Route类来构建我自己的类.现在我想在typescript中实现它以进行身份​​验证,如以下示例所示.

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

我搜索了很多,但找不到一个解释要实现的函数的站点以及调用嵌套路由的类型属性.ES6课程也会有所帮助,谢谢.

我有以下网址: 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？

谢谢

'react-router-dom' 在这里具有刷新功能，但是我不知道该如何调用该方法，而且格式正确的文档也不会去解释它。

window.location.reload（）对我不起作用，因为它也会清除应用商店。我更改了一些数据，然后需要用更新的数据重新加载路由。

我也读过这篇文章：https : //github.com/ReactTraining/react-router/issues/1982 https://github.com/ReactTraining/react-router/issues/2243

这个线程恰好在讨论我的问题：https : //github.com/ReactTraining/react-router/issues/4056

仍然不知道如何去做。这个基本功能不需要太多的努力，但是在花费了大量的精力之后，我无法重新加载当前路线。

这是我的代码：

@inject('store') @observer
export default class PasswordInput extends Component {
    constructor (props) {
        super(props)
        this.setPwd = this.setPwd.bind(this)
        this.submit = this.submit.bind(this)
    }

    componentWillMount() {
        this.case = this.props.store.case

        this.setState({refresh: false})
    }
    setPwd(e) {
        // console.log(e)
        this.case.pwd = e.target.value

    }
    submit() {
        console.log(this.props.caseId)
        this.setState({refresh: true})

    }

    render() {
        return (
            <Container>
                <div>{this.state.refresh}</div>
                { (this.state.refresh) && <Redirect refresh={true} to={'/cases/' + this.props.caseId}></Redirect>}
                <br />
                <Grid columns="three">
                    <Grid.Row>
                        <Grid.Column key={2}> …

我有这个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

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

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

任何帮助将不胜感激.

我使用的反应路由器-DOM V4和能够自定义数据发送给使用新的屏幕push(path, state)和replace(path, state)方法“props.history.location”

我要发送的数据恢复到先前的屏幕，但使用不能达到go(n)或goBack()或goForward()。

当我需要将数据发送回上一个屏幕时，如何解决这种情况？

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

当我单击表单和控制台上的提交按钮记录状态和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} …

这基本上都是我的代码.我正在运行Hapi并尝试使用react-loadable来服务器渲染我的React应用程序.

我在这里为代码添加了很多缺失的部分.

const location = req.url.pathname
const context = {}
const modules = []

const Router = () => (
  <Switch>
    <Route exact path="/" component={Home} />
    <Route path="/login" component={Login} />
    <Route path="/me" component={Profile} />
    <Route component={NotFound} />
  </Switch>
)

const App = () => (
  <StaticRouter location={location} context={context}>
    <main>
      <Header />
      <Router />
      <Footer />
    </main>
  </StaticRouter>
)

const preloadables = [ Home, Login, Profile, NotFound ]
await Promise.all(preloadables.map(preloadable => preloadable.preload()))

const html = ReactDOMServer.renderToString(
  <Loadable.Capture report={moduleName => …

我在构建多租户 SaaS 解决方案时遇到问题。对于每个租户，我希望他们使用子域，这样我就可以从 url 获取子域，调用返回有关该租户的数据的 REST api。

例如，

1. 管理员（完全是另一个应用程序 - 管理应用程序）创建一个域名为 的租户：tenant1。
2. 在本地系统上的租户应用程序中，我能够访问tenant1.localhost:3000. 我获取了 url，并获取了域名。然后，我与域进行调用以获取租户的主题（这存储在 localStorage 中）。

不幸的是，我们在我的公司部署在 k8 上，所以我无法模仿这种行为。因此，devOps 团队建议我在上下文中使用子域，从而拥有localhost:3000/tenant1. 请记住，租户是动态的，所以我尝试了以下方法：

<BrowserRouter basename={"/:tenant"}>
    <Switch>
        <Route exact path="/login" name="Login" component={Login} />
        <Route exact path="/set-password/:token" name="Set Password" component={SetPassword} />
        <PrivateRoute path="/" name="Default Layout" component={DefaultLayout} /> 
    </Switch>              
</BrowserRouter>

然而，上面的解决方案使我的 url 为 localhost:3000/:tenant/login

请问我如何在路由器中使用动态基本名称，以便它可以接受：

localhost:3000/tenant1 localhost:3000/tenant3 localhost:3000/tenant2ETC。

它可以允许任何，我的应用程序处理输入的错误域