Question

我想在使用hookrouter的反应中使用多个布局

在正常的反应路由器中，我使用路由器中的路由来产生多重布局效果

我想更改为hookrouter的React Router普通代码：

export default () =>
        <Switch>
            <Route exact path={[ Doctor_Login, Doctor_Panel , Reception_Login ,  Reception_Panel , Pharmacy_Login , "/"]}>
                <NavBar >
                    <Switch>
                        <Route exact path="/" component={MainView}/>

                        <Route exact path={Doctor_Login}
                              render={(props) => <Login {...props} Type={"Doctor"} />}/>

                        <Route exact path={Doctor_Panel} component={DoctorPanel}/>

                        <Route exact path={Reception_Login}
                              render={(props) => <Login {...props} Type={"Reception"} />}/>

                        <Route exact path={Reception_Panel} component={ReceptionPanel}/>

                        <Route exact path={Pharmacy_Login}
                              render={(props) => <Login {...props} Type={"Pharmacy"} />}/>
                    </Switch>
                </NavBar>
            </Route>
            <Route exact path={["/Test", Pharmacy_Panel , Pharmacy_Sell]}>
                <NavBarDrawer>
                    <Switch>
                        <Route exact path="/Test" component={Tests}/>
                        <Route exact path={Pharmacy_Panel} component={PharmacyPanel}/>
                        <Route exact path={Pharmacy_Sell} component={SellPanel}/>
                    </Switch>
                </NavBarDrawer>
            </Route>
        </Switch>

hookrouter中的预期代码

const routes = {
<Layout1>
    '/comp1': () => <Comp1 />,
</Layout1>

<layout2>
    '/comp2': () => <Comp2 />,
</layout2>
};

Answer 1

我认为您可以根据docs中的嵌套路由部分进行操作： https://github.com/Paratron/hookrouter/blob/master/src-docs/pages/en/02_routing.md#nested-routing

简而言之，您可以根据父级设置不同的布局：

Failed to build psutil
Installing collected packages: psutil
    Running setup.py install for psutil ... error
    ERROR: Command errored out with exit status 1:
     command: /opt/python/3.7.5/bin/python3.7 -u -c 'import sys, setuptools, tokenize; sys.argv[0] = '"'"'/tmp/pip-install-pnv8vynd/psutil/setup.p
y'"'"'; __file__='"'"'/tmp/pip-install-pnv8vynd/psutil/setup.py'"'"';f=getattr(tokenize, '"'"'open'"'"', open)(__file__);code=f.read().replace('"'
"'\r\n'"'"', '"'"'\n'"'"');f.close();exec(compile(code, __file__, '"'"'exec'"'"'))' install --record /tmp/pip-record-4zlijwis/install-record.txt -
-single-version-externally-managed --compile
         cwd: /tmp/pip-install-pnv8vynd/psutil/
    Complete output (41 lines):
    running install
    running build
    running build_py
    creating build
    creating build/lib.linux-x86_64-3.7
    creating build/lib.linux-x86_64-3.7/psutil
    copying psutil/_psbsd.py -> build/lib.linux-x86_64-3.7/psutil
    copying psutil/_psposix.py -> build/lib.linux-x86_64-3.7/psutil
    copying psutil/_pswindows.py -> build/lib.linux-x86_64-3.7/psutil
    copying psutil/__init__.py -> build/lib.linux-x86_64-3.7/psutil
    copying psutil/_pslinux.py -> build/lib.linux-x86_64-3.7/psutil
    copying psutil/_psaix.py -> build/lib.linux-x86_64-3.7/psutil
    copying psutil/_pssunos.py -> build/lib.linux-x86_64-3.7/psutil
    copying psutil/_common.py -> build/lib.linux-x86_64-3.7/psutil
    copying psutil/_compat.py -> build/lib.linux-x86_64-3.7/psutil
    copying psutil/tests/test_linux.py -> build/lib.linux-x86_64-3.7/psutil/tests
    copying psutil/tests/test_windows.py -> build/lib.linux-x86_64-3.7/psutil/tests
    copying psutil/tests/test_process.py -> build/lib.linux-x86_64-3.7/psutil/tests
    copying psutil/tests/test_misc.py -> build/lib.linux-x86_64-3.7/psutil/tests
    copying psutil/tests/test_memory_leaks.py -> build/lib.linux-x86_64-3.7/psutil/tests
    copying psutil/tests/__main__.py -> build/lib.linux-x86_64-3.7/psutil/tests
    copying psutil/tests/test_system.py -> build/lib.linux-x86_64-3.7/psutil/tests
    copying psutil/tests/test_osx.py -> build/lib.linux-x86_64-3.7/psutil/tests
    copying psutil/tests/test_posix.py -> build/lib.linux-x86_64-3.7/psutil/tests
    copying psutil/tests/test_sunos.py -> build/lib.linux-x86_64-3.7/psutil/tests
    copying psutil/tests/test_connections.py -> build/lib.linux-x86_64-3.7/psutil/tests
    copying psutil/tests/test_aix.py -> build/lib.linux-x86_64-3.7/psutil/tests
    copying psutil/tests/test_bsd.py -> build/lib.linux-x86_64-3.7/psutil/tests
    copying psutil/tests/runner.py -> build/lib.linux-x86_64-3.7/psutil/tests
    copying psutil/tests/test_unicode.py -> build/lib.linux-x86_64-3.7/psutil/tests
    running build_ext
    building 'psutil._psutil_linux' extension
    creating build/temp.linux-x86_64-3.7
    creating build/temp.linux-x86_64-3.7/psutil
    gcc -pthread -Wno-unused-result -Wsign-compare -DNDEBUG -g -fwrapv -O3 -Wall -fPIC -DPSUTIL_POSIX=1 -DPSUTIL_VERSION=567 -DPSUTIL_LINUX=1 -DPS
UTIL_ETHTOOL_MISSING_TYPES=1 -I/opt/python/3.7.5/include/python3.7m -c psutil/_psutil_common.c -o build/temp.linux-x86_64-3.7/psutil/_psutil_commo
n.o
    unable to execute 'gcc': No such file or directory
    error: command 'gcc' failed with exit status 1
    ----------------------------------------
Cleaning up...
ERROR: Command errored out with exit status 1: /opt/python/3.7.5/bin/python3.7 -u -c 'import sys, setuptools, tokenize; sys.argv[0] = '"'"'/tmp/pi
p-install-pnv8vynd/psutil/setup.py'"'"'; __file__='"'"'/tmp/pip-install-pnv8vynd/psutil/setup.py'"'"';f=getattr(tokenize, '"'"'open'"'"', open)(__
file__);code=f.read().replace('"'"'\r\n'"'"', '"'"'\n'"'"');f.close();exec(compile(code, __file__, '"'"'exec'"'"'))' install --record /tmp/pip-rec
ord-4zlijwis/install-record.txt --single-version-externally-managed --compile Check the logs for full command output.

每个布局组件将拥有自己的路线

反应钩路由器多布局

1 个答案: