Question

我想以这样的方式创建一个页面，它将以这样的方式路由.......那

App.js到HomePage.js到Footer.js。现在，当我尝试执行此任务时，它显示路由器只有1个子元素的错误。

App.js的代码：

import React, { Component } from 'react';
import logo from './logo.svg';
import HomePage from './Home_page'

import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <HomePage />
      </div>
    );
  }
}

export default App;

Home_page.js的代码

import React, {Component} from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import FooterPage from './FooterPage';
class HomePage extends Component {
  render(){
    return(
    <Router>

      <div>
        <Link to='./FooterPage'>Footer Page</Link>
      </div>
      <Switch>
        <Route exact path='./FooterPage' component={FooterPage} />
      </Switch>
    </Router>
    );
  }
}
export default HomePage;

Footer.js的代码

import React, {Component} from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
class FooterPage extends Component {
  render(){
    return(
      <div>

      </div>
    );
  }
}
export default FooterPage;

Answer 1

在你的Home_Page.js

import React, {Component} from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import FooterPage from './FooterPage';
class HomePage extends Component {
  render(){
    return(
    <Router>
      <div>
        <div>
          <Link to='./FooterPage'>Footer Page</Link>
        </div>
        <Switch>
          <Route exact path='./FooterPage' component={FooterPage} />
        </Switch>
      </div>
    </Router>
    );
  }
}
export default HomePage;

这里你只有一个孩子在路线内，而不是两个。见https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/BrowserRouter.md

路由器只有一个子组件错误

1 个答案: