與反應路由器V4，材料UI和阿波羅客戶端選項

Question

我與阿波羅客戶合作，反應，REAC routerv4和材料的UI響應appbar，我的應用程序工作， 插入材料的UI之前，我有

<Link to="/" className="navbar">React + GraphQL Tutorial</Link> 

，我已經插入材料的UI

<AppBar 
    title="Title" 
    iconClassNameRight="muidocs-icon-navigation-expand-more" 
    /> 

，但現在還不清楚，我如何與小屏幕添加鏈接的標題和選項，在響應模式，我認爲一定是看不見的選項，在小屏幕上沒有。 官方的材料ui網站沒有很好地解釋像bootstrap的例子，所以我需要一個幫助litlle。

完整的代碼是：

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

import './App.css'; 
import ChannelsListWithData from './components/ChannelsListWithData'; 
import NotFound from './components/NotFound'; 
import ChannelDetails from './components/ChannelDetails'; 
import AppBar from 'material-ui/AppBar'; 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 

import { 
    ApolloClient, 
    ApolloProvider, 
    createNetworkInterface, 
    toIdValue, 
} from 'react-apollo'; 


const networkInterface = createNetworkInterface({ uri: 'http://localhost:4000/graphql' }); 
networkInterface.use([{ 
    applyMiddleware(req, next) { 
    setTimeout(next, 500); 
    }, 
}]); 

function dataIdFromObject (result) { 
    if (result.__typename) { 
    if (result.id !== undefined) { 
     return `${result.__typename}:${result.id}`; 
    } 
    } 
    return null; 
} 

// customResolvers: 
// This custom resolver tells Apollo Client to check its cache for a Channel object with ID $channelId 
// whenever we make a channel query. If it finds a channel with that ID in the cache, 
// it will not make a request to the server. 

const client = new ApolloClient({ 
    networkInterface, 
    customResolvers: { 
     Query: { 
      channel: (_, args) => { 
       return toIdValue(dataIdFromObject({ __typename: 'Channel', id: args['id'] })) 
      }, 
     }, 
    }, 
    dataIdFromObject, 
}); 


class App extends Component { 
    render() { 
    return (
     <ApolloProvider client={client}> 
     <BrowserRouter> 
      <MuiThemeProvider muiTheme={getMuiTheme()}> 
      <div className="App"> 
       <Link to="/" className="navbar">React + GraphQL Tutorial</Link> 
       <AppBar 
       title="Title" 
       iconClassNameRight="muidocs-icon-navigation-expand-more" 
       /> 
       <Switch> 
       <Route exact path="/" component={ChannelsListWithData}/> 
       <Route path="/channel/:channelId" component={ChannelDetails}/> 
       <Route component={ NotFound }/> 
       </Switch> 
      </div> 
      </MuiThemeProvider> 
     </BrowserRouter> 
     </ApolloProvider> 
    ); 
    } 
} 

export default App; 

Answer 1

右邊是添加一個這樣的代碼：

  <AppBar position="static"> 
      <Toolbar> 
       <IconButton color="contrast" aria-label="Menu"> 

       </IconButton> 
       <Typography type="title" color="inherit" > 
       {"Admin"} 
       </Typography> 
       <AuthLink to="/customers" label="Customers"/> 
       <AuthLink to="/tours" label="Tours"/> 
       <AuthLink to="/signout" label="Sign Out"/> 
       <AuthLink to="/signin" label=" Sign In" whenLogged="false"/> 
      </Toolbar> 
      </AppBar> 

Authlink僅僅是我寫的，顯示選項的組成部分，在那裏簡單我添加標題顯示選項。

const AuthLink = (props) => { 
    let auth = checkAuth(); 
    return (
    ((auth && !props.whenLogged) || (!auth && props.whenLogged == "false") ) ? (
     <Link to={props.to} className="navbar"><Button>{props.label}</Button></Link> 
    ) : (
     null 
    ) 
); 
} 

「按鈕」 是從材料的成分， 「鏈接」 從反應路由器，這裏的進口：

import { 
    BrowserRouter, 
    Link, 
    Route, 
    Switch, 
    Redirect, 
} from 'react-router-dom'; 

import { MuiThemeProvider, createMuiTheme } from 'material-ui/styles'; 
import AppBar from 'material-ui/AppBar'; 
import Toolbar from 'material-ui/Toolbar'; 
import Typography from 'material-ui/Typography'; 
import Button from 'material-ui/Button'; 
import IconButton from 'material-ui/IconButton';