Javascript &引用；您不应该使用<；链接>；a<；路由器>&引用；甚至连链路都在路由器内部

我正在学习React中的路由系统。我检查了我的代码中的所有内容，它似乎是正确的，但我不知道为什么它不起作用

版本：

"react-router-dom": "4.2.2",
"react": "^16.8.4",

index.js

我们从index.js转到App.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.css';
import 'bootstrap-social/bootstrap-social.css';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
将*作为serviceWorker从“/serviceWorker”导入；
导入'bootstrap/dist/css/bootstrap.min.css'；
导入'font-awesome/css/font-awesome.css'；
导入“bootstrap social/bootstrap social.css”；
ReactDOM.render（，document.getElementById（'root'））；
serviceWorker.unregister（）；

App.js

我们在App.js中实现了BrowserRouter

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

import Main from './components/MainComponent';

import './App.css';
import { DISHES } from './shared/dishes';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      dishes: DISHES
    };
  }

  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Main />
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“react router dom”导入{BrowserRouter}；
从“/components/MainComponent”导入主组件；
导入“/App.css”；
从“./shared/disks”导入{disks}；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
菜品：菜品
};
}
render（）{
返回(
);
}
}
导出默认应用程序；

MainComponent.js

我们在MainComponent.js中定义路由

import React, { Component } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';

import Header from './HeaderComponent';
import Footer from './FooterComponent';
import Menu from './MenuComponent';
import Home from './HomeComponent';

import { DISHES } from '../shared/dishes';

class Main extends Component {

  constructor(props) {
    super(props);
    this.state = {
        dishes: DISHES
    };
  }

  render() {
    const HomePage = () => {
      return(
          <Home />
      );
    }

    return (
      <div>
        <Header />
        <Switch>
          <Route path='/home' component={HomePage} />
          <Route exact path='/menu' component={() => <Menu dishes={this.state.dishes} />} />
          <Redirect to="/home" />
        </Switch>
        <Footer />
      </div>
    );
  }
}

export default Main;

import React, { Component } from 'react';
import { Nav, Navbar, NavbarBrand, NavbarToggler, Collapse, NavItem, Jumbotron } from 'reactstrap';
import { NavLink } from 'react-router-dom';
class Header extends Component {
    constructor(props) {
        super(props);

        this.toggleNav = this.toggleNav.bind(this);
        this.state = {
          isNavOpen: false
        };
      }

      toggleNav() {
        this.setState({
          isNavOpen: !this.state.isNavOpen
        });
      }

    render() {
        return(
            <div>
                <Navbar dark expand="md">
                    <div className="container">
                        <NavbarToggler onClick={this.toggleNav} />
                        <NavbarBrand className="mr-auto" href="/"><img src='assets/images/logo.png' height="30" width="41" alt='Ristorante Con Fusion' /></NavbarBrand>
                        <Collapse isOpen={this.state.isNavOpen} navbar>
                            <Nav navbar>
                              <NavItem>
                                  <NavLink className="nav-link"  to='/home'><span className="fa fa-home fa-lg"></span> Home</NavLink>
                              </NavItem>
                              <NavItem>
                                  <NavLink className="nav-link" to='/aboutus'><span className="fa fa-info fa-lg"></span> About Us</NavLink>
                              </NavItem>
                              <NavItem>
                                  <NavLink className="nav-link"  to='/menu'><span className="fa fa-list fa-lg"></span> Menu</NavLink>
                              </NavItem>
                              <NavItem>
                                  <NavLink className="nav-link" to='/contactus'><span className="fa fa-address-card fa-lg"></span> Contact Us</NavLink>
                              </NavItem>
                            </Nav>
                        </Collapse>
                    </div>
                </Navbar>
                <Jumbotron>
                    <div className="container">
                        <div className="row row-header">
                            <div className="col-12 col-sm-6">
                                <h1>Ristorante con Fusion</h1>
                                <p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
                            </div>
                        </div>
                    </div>
                </Jumbotron>
            </div>
        );
    }
}
export default Header;

import React，{Component}来自'React'；
从“react router dom”导入{交换机、路由、重定向}；
从“./HeaderComponent”导入标题；
从“/FooterComponent”导入页脚；
从“/MenuComponent”导入菜单；
从“/HomeComponent”导入主目录；
从“../shared/disks”导入{disks}；
类主扩展组件{
建造师（道具）{
超级（道具）；
此.state={
菜品：菜品
};
}
render（）{
const主页=（）=>{
返回(
);
}
返回(
} />
);
}
}
导出默认主；

HeaderComponent.js

导航栏，HeaderComponent.js中的导航

import React, { Component } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';

import Header from './HeaderComponent';
import Footer from './FooterComponent';
import Menu from './MenuComponent';
import Home from './HomeComponent';

import { DISHES } from '../shared/dishes';

class Main extends Component {

  constructor(props) {
    super(props);
    this.state = {
        dishes: DISHES
    };
  }

  render() {
    const HomePage = () => {
      return(
          <Home />
      );
    }

    return (
      <div>
        <Header />
        <Switch>
          <Route path='/home' component={HomePage} />
          <Route exact path='/menu' component={() => <Menu dishes={this.state.dishes} />} />
          <Redirect to="/home" />
        </Switch>
        <Footer />
      </div>
    );
  }
}

export default Main;

import React, { Component } from 'react';
import { Nav, Navbar, NavbarBrand, NavbarToggler, Collapse, NavItem, Jumbotron } from 'reactstrap';
import { NavLink } from 'react-router-dom';
class Header extends Component {
    constructor(props) {
        super(props);

        this.toggleNav = this.toggleNav.bind(this);
        this.state = {
          isNavOpen: false
        };
      }

      toggleNav() {
        this.setState({
          isNavOpen: !this.state.isNavOpen
        });
      }

    render() {
        return(
            <div>
                <Navbar dark expand="md">
                    <div className="container">
                        <NavbarToggler onClick={this.toggleNav} />
                        <NavbarBrand className="mr-auto" href="/"><img src='assets/images/logo.png' height="30" width="41" alt='Ristorante Con Fusion' /></NavbarBrand>
                        <Collapse isOpen={this.state.isNavOpen} navbar>
                            <Nav navbar>
                              <NavItem>
                                  <NavLink className="nav-link"  to='/home'><span className="fa fa-home fa-lg"></span> Home</NavLink>
                              </NavItem>
                              <NavItem>
                                  <NavLink className="nav-link" to='/aboutus'><span className="fa fa-info fa-lg"></span> About Us</NavLink>
                              </NavItem>
                              <NavItem>
                                  <NavLink className="nav-link"  to='/menu'><span className="fa fa-list fa-lg"></span> Menu</NavLink>
                              </NavItem>
                              <NavItem>
                                  <NavLink className="nav-link" to='/contactus'><span className="fa fa-address-card fa-lg"></span> Contact Us</NavLink>
                              </NavItem>
                            </Nav>
                        </Collapse>
                    </div>
                </Navbar>
                <Jumbotron>
                    <div className="container">
                        <div className="row row-header">
                            <div className="col-12 col-sm-6">
                                <h1>Ristorante con Fusion</h1>
                                <p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
                            </div>
                        </div>
                    </div>
                </Jumbotron>
            </div>
        );
    }
}
export default Header;

import React，{Component}来自'React'；
从“reactstrap”导入{Nav、Navbar、NavbarBrand、NavbarToggler、Collapse、NavItem、Jumbotron}；
从'react router dom'导入{NavLink}；
类头扩展组件{
建造师（道具）{
超级（道具）；
this.toggleNav=this.toggleNav.bind（this）；
此.state={
isNavOpen:false
};
}
toggleNav（）{
这是我的国家({
isNavOpen:！this.state.isNavOpen
});
}
render（）{
返回(
家
关于我们
菜单
联系我们
Ristorante con Fusion
我们从世界上最好的菜肴中汲取灵感，创造出独特的融合体验。我们的唇彩创意将让您的烹饪感觉愉悦

);
}
}
导出默认标题；

欢迎来到Stack Overflow Billy Chan！这段代码中没有明显的错误。请在例如中创建一个，这样会更容易有人帮助您。是的，这似乎是一个有效的路由设置。。。。我总是觉得调试路由器是一种奇怪的经历，因为它总是非常明显，也很容易被忽视。你能找一个密码沙盒或什么东西来四处看看吗？这是我的代码。这很奇怪。这些代码似乎在沙箱中工作。但是，它无法在我的浏览器中工作。欢迎来到比利陈！这段代码中没有明显的错误。请在例如中创建一个，这样会更容易有人帮助您。是的，这似乎是一个有效的路由设置。。。。我总是觉得调试路由器是一种奇怪的经历，因为它总是非常明显，也很容易被忽视。你能找一个密码沙盒或什么东西来四处看看吗？这是我的代码。这很奇怪。这些代码似乎在沙箱中工作。但是，它无法在我的浏览器中工作。