React HashRouter 4.2 header and footer on some routes

Question

How do I nest routes so I show a header and footer on some pages?

I have this code:

"@material/textfield": "npm:@material/textfield@^0.3.6"

I also have a import {MDCTextfieldFoundation} from '@material/textfield'; and Error: (SystemJS) Unexpected token import SyntaxError: Unexpected token import at eval (<anonymous>) at Object.eval (http://localhost:9000/jspm_packages/npm/@material/textfield@0.3.6.js:1:123) at eval (.... component that I want to display on all pages except the <HashRouter> <Switch> <Route exact path="/" component={Home} /> <Route exact path="/about" component={About} /> <Route path="/rlogin" component={ReceiverLoginForm} /> <Route path="/profile" component={Profile} /> <Route path="/details" component={Details} /> </Switch> </HashRouter> and <Header> pages.

How do I do that? I can't figure out how to nest routes or anything like that...

Answer 1

Since your're using the sudo chown myacct:mygrp offending_path which prevents you from matching more than 1 route. you can just use /tmp/PZHyT7 method of nano instead of Switch.

render

Find more about Route render method

Answer 2

这是我如何做到这一点所以我没有重复的路由，有很多页眉和页脚：

render() {
    const headerFooterRoutes = ["/rlogin", "/profile", "/details"]
    return (
        <MuiThemeProvider>
            <Provider store={store}>
                <div id="wrapper">
                    <HashRouter>
                        <Switch>
                            {headerFooterRoutes.map(path =>
                                <Route path={path} component={Header}/>
                            )}
                        </Switch>
                    </HashRouter>
                    <HashRouter>
                        <Switch>
                            <Route exact path="/" component={Home}/>
                            <Route path="/rlogin" component={LoginForm}/>
                            <Route path="/profile" component={Profile} />
                            <Route path="/details" component={Details} />
                        </Switch>
                    </HashRouter>
                    <HashRouter>
                        <Switch>
                            {headerFooterRoutes.map(path =>
                                <Route path={path} component={Footer}/>
                            )}
                        </Switch>
                    </HashRouter>
                </div>
            </Provider>
        </MuiThemeProvider>
    );
}