web-dev-qa-db-ja.com

React-router-domv4ネストされたルートが機能しない

未解決の質問に関連して（最終的な結論として）

私も同じ問題を抱えています。

https://reacttraining.com/react-router/web/guides/quick-startreact-router-domを宣伝します

また、コンポーネント内ではなく、1つのファイルでlist down routesする方がよいと考えられます。

参照されているもの：https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config

何かが機能している（ほとんど）：

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


export const Routes = () => (
  <Router>
    <div>
      <Switch>
        <Route exact path="/login" component={Login}/>
        <MainApp path="/">
          <Route path="/list" component={List}/>
          <Route path="/settings" component={Settings}/>
        </MainApp>
        <Route path="*" component={PageNotFound}/>
      </Switch>
    </div>
  </Router>
)

何かが機能していません：site.com/SomeGarbagePathは<MainApp>を示していると思います。
<Route path="*" component={PageNotFound}/>

更新

/ - Home - parent of all (almost)
/List - inside home
/Settings - inside home
/Login - standalone
/Users - inside home, For now just showing itself. It has further pages.
/User/123 - inside user with /:id
/User/staticUser - inside user with static route
/garbage - not a route defined (not working as expected)
reactjsreact-routerreact-router-v4react-router-dom
11
Masood

これはあなたが説明したことを行う1つの方法です（Reactコンポーネント）で直接レイアウトを処理する他の方法があることに注意してください）。例を単純にするために、他のコンポーネント（<Home>, <List>など）は、プロパティや状態のない純粋に機能的なコンポーネントとして作成されますが、それぞれを適切なReactコンポーネントとして独自のファイルに入れるのは簡単です。以下の例は完全であり、実行されます。

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

class App extends Component {
  render() {

    const Header = () => <h1>My header</h1>;
    const Footer = () => <h2>My footer</h2>;
    const Login = () => <p>Login Component</p>;    
    const Home = () => <p>Home Page</p>;
    const List = () => <p>List Page</p>;
    const Settings = () => <p>Settings Page</p>;
    const PageNotFound = () => <h1>Uh oh, not found!</h1>;

    const RouteWithLayout = ({ component, ...rest }) => {
      return (
        <div>
          <Header />
          <Route {...rest} render={ () => React.createElement(component) } />
          <Footer />
        </div>
      );
    };

    return (
      <Router>
        <div>
          <Switch>
            <Route exact path="/login" component={Login} />
            <RouteWithLayout exact path="/" component={Home} />
            <RouteWithLayout path="/list" component={List} />
            <RouteWithLayout path="/settings" component={Settings} />
            <Route path="*" component={PageNotFound} />
          </Switch>
        </div>
      </Router>    
    );
  }
}

export default App;

これにより、次のことが行われます。これが、質問で説明されていることを願っています。

  1. /loginヘッダーまたはフッターはありません。
  2. /、/list、および/settingsすべてにヘッダーとフッターがあります。
  3. 見つからないルートは、ヘッダーやフッターなしでPageNotFoundコンポーネントを表示します。
10
Todd Chaffee

私は正直に言うと、あなたが何を求めているのか完全にはわかりません。 「何かが機能していない」例を機能させようとしていると思います。

このようなもの、

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


export const Routes = () => (
  <Router>
    <div>
      <Switch>
        <Route exact path="/login" component={Login}/>
        <MainApp path="/">
          <Switch>
            <Route path="/list" component={List}/>
            <Route path="/settings" component={Settings}/>
          </Switch>
        </MainApp>
        <Route component={PageNotFound} /> 
      </Switch>
    </div>
  </Router>
)
1
Tyler McGinnis