陣營路由器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 - 重定向到一個頁面路由器範圍

回答

相關問題