如何在 react.js 中创建全屏路线

Question

我有一个 React 应用程序，我想创建一个具有独特 url 的组件，该组件还具有 none 网站其余部分的导航（如全屏预览）。我到处寻找如何做到这一点，但没有真正找到任何东西。我的组件路由如下所示

                <Route path='/embed/:documentid' component={Embed} />

我的应用看起来像这样

import React, { Fragment } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

//LAYOUT
import './scss/a_main.scss';
import Navbar from './components/layout/Navbar';

//PAGES
import MyLibrary from './components/pages/MyLibrary';
import Home from './components/pages/Home';
import Embed from './components/documentEmbed/embed';
// AUTH
import Register from './components/auth/Register';
import Login from './components/auth/Login';
import Alerts from './components/layout/Alerts';
import PrivateRoute from './components/auth/PrivateRoute';
import AuthState from './context/auth/AuthState';
import setAuthToken from './utils/setAuthToken';

//STATES

import DocumentState from './context/Document/DocumentState';

//UTILS
import AlertState from './context/alert/AlertState';

//GUI
import DocumentEditor from './components/documentEditor/documentEditor';
import GUIDev from './components/pages/GUIDev';

if (localStorage.token) {
  setAuthToken(localStorage.token);
}

const App = () => {
  return (
    <AuthState>
      <DocumentState>
        <AlertState>
          <Router>
            <Fragment>
              <Navbar />
              <Alerts />
              <Switch>
                <PrivateRoute exact path='/' component={Home} />
                <Route exact path='/register' component={Register} />
                <Route exact path='/login' component={Login} />
                <Route exact path='/guidev' component={GUIDev} />
                <PrivateRoute exact path='/mylibrary' component={MyLibrary} />

                <PrivateRoute exact path='/myDocs' component={DocumentEditor} />
              </Switch>
            </Fragment>
          </Router>
        </AlertState>
      </DocumentState>
    </AuthState>
  );
};

export default App;

如果我将路由嵌入组件放在该页面的任何位置，我最终会在页面某处看到导航栏。

我试过了

我想我可以把它放在另一个层次结构中并使用逻辑来确定哪个层次结构，但我不知道使用什么变量可以在层次结构之间切换。下面的示例（带有逻辑伪代码）

          <Router>
{(example logic here)}
<Fragment>
                <Route path='/embed/:documentid' component={Embed} />

</fragment>
{(else)}
            <Fragment>
              <Navbar />
              <Alerts />
              <Switch>
                <PrivateRoute exact path='/' component={Home} />
                <Route exact path='/register' component={Register} />
                <Route exact path='/login' component={Login} />
                <Route exact path='/guidev' component={GUIDev} />
                <Route path='/embed/:documentid' component={Embed} />
                <PrivateRoute exact path='/mylibrary' component={MyLibrary} />

                <PrivateRoute exact path='/myDocs' component={DocumentEditor} />
              </Switch>
            </Fragment>
          </Router>

Answer 1

为此添加一个 context 怎么样？例如 FullscreenContext.js

// create the context with necessary keys
const FullScreenContext = createContext({
  fullscreen: false
});

// consumer if you want to use it with nesting
export const FullScreenContextConsumer = FullScreenContext.Consumer;

// provider to provide it to the components
export const FullScreenContextProvider = ({ children }) => {
  const [isFullScreen, setIsFullScreen] = useState(false);
  
  const enableFullScreen = () => setIsFullScreen(true);
  const disableFullScreen = () => setIsFullScreen(false);

  return (
    <FullScreenContext.Provider value={{fullscreen: isFullScreen}}>
      {children}
    </FullScreenContext.Provider>
  );
}

export default FullScreenContext; // the default export, for `useContext(..)`

App.js

const App = () => {
  const { fullscreen } = useContext(FullScreenContext);

  return (
    <Router>
      <Fragment>
        { !fullscreen && <Navbar /> }
        <Switch>
        </Switch>
      </Fragment>
    </Router>
  );
};

YourFullScreenPage.js

export default () => {
  const { enableFullScreen, disableFullScreen } = useContext(FullScreenContext);
  
  useEffect(() => {
    enableFullScreen(); // enable it on mount
    return () => disableFullScreen(); // disable it again on unmount
  }, [])
}

确保在提供程序需要的地方包装组件，例如 index.js

ReactDOM.render(
  <FullScreenContextProvider>
    <App />
  </FullScreenContextProvider>
)

您甚至可以根据与 YourFullScreenPage.js 相同的原则创建一个用于包装全屏页面的自定义组件，按您的需要做！

P.S。这段代码是我脑子写的，所以我不确定它是否可以正常编译

Answer 2

您好，我想出了一个简单的方法来解决我的问题。我从 App.js 层次结构中删除了 NavBar 组件，并将其放在我需要的地方

  <Router>
{(example logic here)}
<Fragment>
                <Route path='/embed/:documentid' component={Embed} />

</fragment>
{(else)}
            <Fragment>
 ///NAVBAR DELETED FROM HERE
              <Alerts />
              <Switch>
                <PrivateRoute exact path='/' component={Home} />
                <Route exact path='/register' component={Register} />
                <Route exact path='/login' component={Login} />
                <Route exact path='/guidev' component={GUIDev} />
                <Route path='/embed/:documentid' component={Embed} />
                <PrivateRoute exact path='/mylibrary' component={MyLibrary} />

                <PrivateRoute exact path='/myDocs' component={DocumentEditor} />
              </Switch>
            </Fragment>
          </Router>

这是一个简单的更改 use-case 我知道如果层次结构中有很多其他组件，这可能不实用，但它对我有用。

然后我将导航栏单独放入页面

如何在 react.js 中创建全屏路线

how to create a fullscreen route in react.js

router

reactjs

我试过了