Reactjs 无法在react hooks站点中查看从主页和教程页面返回的文本

无法在我的主页和网站的教程页面中查看返回的

标题文本。下面是我的App.js、Navigation.js和Home.js。有人能告诉我这个问题吗

App.js

import React from 'react';
import { BrowserRouter, Route, Switch } from "react-router-dom";
import './App.css';
import Home from "./components/Home";
import Tutorials from "./components/Tutorials";
import Navigation from './components/Navigation';

function App() {
  return (
    <BrowserRouter>
        <Navigation>
          <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/tutorials" component={Tutorials} />
          </Switch>
        </Navigation>
    </BrowserRouter>
  );
};

export default App;

import React from 'react';
import { NavLink} from 'react-router-dom';

const Navigation = () => {

    return (
        <div className="App">
            <div className="wrapper">
                <div id="wrap">
                    <nav className="siteNavigation_nav_links">
                        <div className="row" ></div>
                        <div className="main_links_nav">
                            <NavLink className="mob_link" to="/">Home</NavLink>
                            <NavLink className="mob_link" to="/tutorials">Tutorials</NavLink>
                        </div>
                    </nav>
                </div>
            </div>
        </div>

    )

}

export default Navigation;

import React from 'react';

const Home = () =>{

    return (
        <div className="App">
            <h1>This is Home Page !</h1>
        </div>
    )
}
export default Home;

import React from 'react';

const Tutorials = () =>{

    return (
        <div><h1>This is Tutorials Page !</h1></div>
    )
};
export default Tutorials;

Home.js

import React from 'react';
import { BrowserRouter, Route, Switch } from "react-router-dom";
import './App.css';
import Home from "./components/Home";
import Tutorials from "./components/Tutorials";
import Navigation from './components/Navigation';

function App() {
  return (
    <BrowserRouter>
        <Navigation>
          <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/tutorials" component={Tutorials} />
          </Switch>
        </Navigation>
    </BrowserRouter>
  );
};

export default App;

import React from 'react';
import { NavLink} from 'react-router-dom';

const Navigation = () => {

    return (
        <div className="App">
            <div className="wrapper">
                <div id="wrap">
                    <nav className="siteNavigation_nav_links">
                        <div className="row" ></div>
                        <div className="main_links_nav">
                            <NavLink className="mob_link" to="/">Home</NavLink>
                            <NavLink className="mob_link" to="/tutorials">Tutorials</NavLink>
                        </div>
                    </nav>
                </div>
            </div>
        </div>

    )

}

export default Navigation;

import React from 'react';

const Home = () =>{

    return (
        <div className="App">
            <h1>This is Home Page !</h1>
        </div>
    )
}
export default Home;

import React from 'react';

const Tutorials = () =>{

    return (
        <div><h1>This is Tutorials Page !</h1></div>
    )
};
export default Tutorials;

导航是导航栏组件。你想让它在网站上随处可见

因此，您可以在
开关
组件的范围之外轻松地使用它。
这样做时，它将渲染整个屏幕

  <BrowserRouter>
        <Navigation />
          <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/tutorials" component={Tutorials} />
          </Switch>
    </BrowserRouter>


您使用导航的方式是错误的。导航组件是不需要的。如果我们单独添加导航组件，当有更多链接/嵌套链接时，这不是很容易吗？因此，如果我们在导航标记内添加
，则不会这样做？为什么要在导航标记内添加开关？稍后我计划实现受保护的路由和嵌套路由，因此认为交换机可能会有所帮助。我认为您不需要在导航标记中使用交换机。非常感谢您的帮助，我将对此进行进一步调查。已投票并接受您的ans！