使用道具在ReactJS中路由

Question

我有一個主要組件，我擁有所有狀態。 在這裏，我將這個狀態傳遞給了兩個不同的組件。 問題是 - 我需要在兩個不同的鏈接中打開這兩個組件（<TimeTracker />,<TimeCalendar />）。

單獨呈現它們。

我該如何使用React-router？可能嗎？

貝婁是我的主要成分

export default class App extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.initStorage(); 
 
    this.state = { 
 
     startTime: this.getStoreItem('startTime') || 0, 
 
     currentTask: this.getStoreItem('currentTask') || '', 
 
     results: this.getStoreItem('results') || [], 
 
     calendarResults: this.getStoreItem('calendarResults') || [] 
 
    }; 
 
    } 
 

 
    /** 
 
    create an object in localStorage for timer data if it is not present 
 
    */ 
 
    initStorage() { 
 
    let data = localStorage.getItem('timeData'); 
 
    if (!data) { 
 
     localStorage.setItem('timeData', JSON.stringify({})); 
 
    } 
 
    } 
 

 
    /** 
 
    * get item value from storage 
 
    * @param key - item name 
 
    */ 
 
    getStoreItem = (key) => { 
 
    const data = JSON.parse(localStorage.getItem('timeData')); 
 
    return data[key]; 
 
    } 
 

 
    /** 
 
    * change item value in storage 
 
    * * @param key - item name 
 
    * @param value - new value for item 
 
    */ 
 
    setStoreItem = (key, value) => { 
 
    const data = JSON.parse(localStorage.getItem('timeData')); 
 
    data[key] = value; 
 
    localStorage.setItem('timeData', JSON.stringify(data)); 
 
    this.setState({ 
 
     [key]: value 
 
    }); 
 
    } 
 

 
    render() { 
 
    const { startTime, currentTask, results, calendarResults } = this.state; 
 
    return (
 
     <MuiThemeProvider> 
 
     <div> 
 
      <TimeTracker 
 
      results={results} 
 
      setStoreItem={this.setStoreItem} 
 
      startTime={startTime} 
 
      currentTask={currentTask} /> 
 
      <TimeCalendar calendarResults={calendarResults} /> 
 
     </div> 
 
     </MuiThemeProvider> 
 
    ); 
 
    } 
 
}

我在路由是新的，並沒有發現一些類似的例子代碼。

請幫助理解如何做到這一點。 我可以爲他們做路由，但是如果組件沒有道具。 但在我的例子中我很困惑

先謝謝了！

Answer 1

下面是從我reactjs代碼提取物，應該幫助你：

Router.jsx：

import React from 'react'; 
import { Router, Route } from 'react-router'; 
import createBrowserHistory from 'history/createBrowserHistory'; 
// route components 
import { HomePage } from '../Pages/HomePage.jsx'; 
import { LoginPage } from '../Pages/LoginPage.jsx'; 

const browserHistory = createBrowserHistory(); 
export const renderRoutes =() => (
    <Router history={browserHistory}> 
    <div> 
     <Route exact path="/" component={HomePage}/> 
     <Route exact path="/login" component={LoginPage}/> 
    </div> 
    </Router> 
); 

在這個文件中，通過定義將在以下網址進行渲染的組件開始地址你會在你的頁面上訪問。下面是這兩個組件之一：

HomePage.jsx：

import React, { Component } from 'react' 
import { Menu, Segment } from 'semantic-ui-react' 
import { AppBarEX } from '../components/Appbar.jsx' 

export class HomePage extends Component { 
    render() { 
    return (
     <div> 
     <AppBarEX /> 
     </div> 
    ) 
    } 
} 

首頁被定義爲着陸頁的陣營路由器感謝「/」路徑。所以當你登陸網站時，你會自動被定向到主頁。在<AppBarEX/>我用這個：

import { Link } from 'react-router-dom' 
<Link to = "/login"> 

元素允許您定義何時以及如何你想鏈接到其他頁面，這可能是你所期待的。在這種情況下，鏈接會將您發送到登錄頁面。把你的鏈接中的元素，你可以在環線以內將它們包裝：<Link> your element </Link>

最後，你想在你main.jsx渲染元素去如下：

import React from 'react'; 
import { Meteor } from 'meteor/meteor'; 
import { render } from 'react-dom'; 
import { renderRoutes } from './Router.jsx'; 

Meteor.startup(() => { 
    render(renderRoutes(), document.getElementById('main_body')); 
}); 

這將允許您呈現在router.jsx中定義的renderRoutes。您可以在這裏更多的瞭解：

https://github.com/reactjs/react-router-tutorial/tree/master/lessons/02-rendering-a-route

希望這有助於你出去！ D.