陣營路由器V4.0 - 重定向到一個頁面路由器範圍

Question

之外，我想能夠瀏覽到主頁「子頁面」在<路由器定義>之外。這是我的組件。

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組件的頁面？

謝謝

Answer 1

可以導入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>)} 
) 
} 

Answer 2

您可以使用Link和IndexLink組件從反應路由器

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

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

風格這一點，你如何取悅或者用鈕結合起來，你可以使用這種方法。 乾杯！希望它可以幫助

Answer 3

首先，你應該創建一個歷史，並將它傳遞給<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

Answer 4

當與嵌套路由處理反應路由器-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> 
     ) 
    } 
} 

子頁面將每次呈現，如它將始終與'/'路線匹配，但頁面的其餘內容基於路徑。無需在子頁面中嵌套路由器組件，並且保持路由以這種方式嵌套，而不是在多個路由器中嵌套，將通過道具傳遞歷史記錄，並允許您通過道具推送歷史記錄。

希望這有助於和好運！