javascript - 如何在 react 路由器中访问 child ？

Question

应用程序.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Link } from 'react-router-dom';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>React Router class</h2>
        </div>
          <ul>
              <li><Link to="/">Home</Link></li>
              <li><Link to="/One">One</Link></li>
              <li><Link to="/Two">Two</Link></li>
              <li><Link to="/Three">Three</Link></li>
              <li><Link to="/Four">Four</Link></li>
          </ul>

      </div>
    );
  }
}

export default App;

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { Router, Route, Switch } from 'react-router';
import history from "./history";
import One from './One';
import Two from "./Two";
import Three from "./Three";
import Four from "./Four";
import Fourpointone from "./Fourpointone";
import NoMatch from "./NoMatch";





ReactDOM.render(
    <Router history={history}>
        <Switch>
            <Route exact path="/" component={App} />
            <Route path="/One" component={One} />
            <Route path="/Two" component={Two} />
            <Route path="/Three" component={Three} />
            <Route path="/Four" component={Four}>
                <Route path="/Four/:id" component={Fourpointone}/>
            </Route>
            <Route component={NoMatch} />
        </Switch>



    </Router>
    , document.getElementById('root'));
registerServiceWorker();

四.js

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

class Four extends Component {
    render() {
        return (
            <div>
                <h1>Four component</h1>
                <ul>
                    <li><Link to="/Four/123">Four Point One</Link></li>
                </ul>
                {this.props.children}
            </div>
        );
    }
}

export default Four;

Fourpointone.js

import React, {Component} from 'react';

class Fourpointone extends Component {
    render() {
        return (
            <div>
                <h1>This is 4.1 component</h1>
            </div>

        );
    }
}

export default Fourpointone;

我正在学习 react 路由器。我无法访问 Foutpointone 路由路径，它是四路由路径的子路径。我在 Four.js 中有“{this.props.children}”，它应该从父级访问到子级但是好吧......它不起作用，我不知道为什么。如何显示 Fourpointone 组件？好像我不能在父路由中使用子路由，所以我的 child 被忽略了。为什么？它的 react 4.x

Answer 1

如果你想在 Four 中渲染 Fourpointone，你应该直接这样做。使用 React Router 4，您不需要将所有 Route 组件放在一个地方。它可能看起来像这样:

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

class Four extends Component {
    render() {
        return (
            <div>
                <h1>Four component</h1>
                <ul>
                    <li><Link to="/Four/123">Four Point One</Link></li>
                </ul>
                <Route path="/Four/:id" component={Fourpointone}/>
            </div>
        );
    }
}

export default Four;