阵营路由器V4.0 - 重定向到一个页面路由器范围

之外，我想能够浏览到主页“子页面”在<路由器定义>之外。这是我的组件。阵营路由器V4.0 - 重定向到一个页面路由器范围

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

import { Search } from './page/Search'; 
import { Quote } from './page/Quote'; 

export class MainContent extends React.Component<{}, {}> {  
    redirectToHomepage(){ 
     // something.push('/') 
    } 

    render() { 
     return (
      <div id="main"> 
       <button onClick={this.redirectToHomepage}> 
        Back Home 
       </button> 
       <Router> 
        <div> 
         <Route exact path="/" component={Search} /> 
         <Route path="/quote" component={Quote} /> 
        </div> 
       </Router> 
      </div> 
     ); 
    } 
} 

export default MainContent;

通过点击一个按钮，我想返回到主页。【搜索丰成分里面，我能去使用this.props.history.push('/quote');

但我怎么能做到这一点从MainConent组件的页面？

谢谢

来源

2017-03-25 Marián Zeke Šedaj

我得到了同样的问题，'browserHistory'不可用了，因为从进口'反应，router' –

可以导入browserHistory并使用“推”的方法，我认为：

import { browserHistory } from 'react-router; 

redirectToHomepage(){ 
    browserHistory.push('/home'); 
}

更新反应路由器4：现在你需要使用重定向组件从“react-路由器-DOM”，有的像：

render() { 
    render (
    { this.props.authenticated ? 
     (<Redirect to={{ pathname: '/', state: { from: this.props.location }}} />) : 
     (<div> Content</div>)} 
) 
}

来源

2017-03-25 16:55:12 Giancarlos

使用才反应过来路由器-DOM这可能吗？我没有反应路由器安装 –

@MariánZekeŠedaj我认为没有，react-router-dom只导出dom元素 – Giancarlos

browserHistory不是在avai反应路由器v4 + – Sergiu

您可以使用Link和IndexLink组件从反应路由器

var {Link, IndexLink} = require('react-router'); 

..... 
<IndexLink to="/" activeClassName="active">Home Page</IndexLink> 
.....

风格这一点，你如何取悦或者用钮结合起来，你可以使用这种方法。干杯！希望它可以帮助

来源

2017-03-25 16:59:56

谢谢，但我不想使用链接，因为用例稍有不同，我需要能够以编程方式调用它 –

首先，你应该创建一个历史，并将它传递给<Router>。

在您的例子：

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

// new import 
import { createBrowserHistory } from 'history'; 

import { Search } from './page/Search'; 
import { Quote } from './page/Quote'; 

export const history = createBrowserHistory(); 

export class MainContent extends React.Component<{}, {}> {  
    redirectToHomepage(){ 
     history.replace('/myfancypage'); 
    } 

    render() { 
     return (
      <div id="main"> 
       <button onClick={this.redirectToHomepage}> 
        Back Home 
       </button> 
       <Route history={history}> 
        <div> 
         <Route exact path="/" component={Search} /> 
         <Route path="/quote" component={Quote} /> 
        </div> 
       </Router> 
      </div> 
     ); 
    } 
} 

export default MainContent;

然后，您可以也呼吁history.replace('/myfancypage')你的主要组成部分内部以及从那里你import {history} from 'path-to-maincontent-file.js'任何地方。

另外check the router v4 docs here

来源

2017-04-12 22:47:06

当与嵌套路由处理反应路由器-DOM（V4）我倾向于结构的路径/元件为这样：

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


const Quote =() => (
    <h1>Kick butt and chew bubble gum</h1> 
); 

const OtherQuote =() => (
    <h1>“Be yourself; everyone else is already taken.”― Oscar Wilde</h1> 
); 


export class SubPage extends React.Component { 

    redirectToHomepage =() => { 
     this.props.history.push('/') 
    }; 


    render() { 
     return (
      <div id="main"> 
       <button onClick={this.redirectToHomepage}> 
        Back Home 
       </button> 
       <div> 
        <Route path="/quote" component={Quote} /> 
        <Route path="/otherQuote" component={OtherQuote} /> 
       </div> 
      </div> 
     ); 
    } 
} 


export class ReactRouterNesting extends React.Component { 
    render() { 
     return (
      <Router> 
       <div> 
        <Route path="/" component={SubPage}/> 
       </div> 
      </Router> 
     ) 
    } 
}

子页面将每次呈现，如它将始终与'/'路线匹配，但页面的其余内容基于路径。无需在子页面中嵌套路由器组件，并且保持路由以这种方式嵌套，而不是在多个路由器中嵌套，将通过道具传递历史记录，并允许您通过道具推送历史记录。

希望这有助于和好运！

来源

2017-04-12 23:53:32

阵营路由器V4.0 - 重定向到一个页面路由器范围

回答

相关问题