使用道具在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.