Question

App.js

＆＃13;

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;

＆＃13;

index.js

＆＃13;

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();

＆＃13;

Four.js

＆＃13;

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;

＆＃13;

Fourpointone.js

＆＃13;

import React, {Component} from 'react';

class Fourpointone extends Component {
    render() {
        return (
            <div>
                <h1>This is 4.1 component</h1>
            </div>

        );
    }
}

export default Fourpointone;

＆＃13;

＆＃13; 我正在学习反应路由器。我无法访问作为四路径路径的子路径的Foutpointone路径路径。我有＆＃34; {this.props.children}＆＃34;在Four.js中应该从父母那里访问，但是很好......它没有工作，我不知道为什么。我该如何显示Fourpointone组件？好像我不能在父路线中使用儿童路线，所以我的孩子被忽略了。为什么？它的反应是4.x

Answer 1

如果你想在Fourpointone内呈现Four，你应该直接这样做。您不需要使用React Router 4将所有Route组件放在一个位置。它可能如下所示：

＆＃13;

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;

＆＃13;

如何在反应路由器中访问孩子？

1 个答案: