Reactjs react路由器dom路由路径定义在'/'；不起作用

我正在使用electron react样板、react挂钩和上下文进行项目

我有关于反应路由器dom的问题。在“/”后面定义的每个路径，导航都不能工作，否则它会正常工作

我尝试在它上面添加精确属性，但第一页停止了渲染

这是我的密码：

Index.js：

 import React, { Fragment } from 'react';
    import { render } from 'react-dom';
    import './app.global.css';
    import App from './App';

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

import React，{Fragment}来自'React'；
从'react dom'导入{render}；
导入“/app.global.css”；
从“./App”导入应用程序；
render（，document.getElementById（'root'））；

App.js：

import React, { useState } from 'react';
import { hot } from 'react-hot-loader';
import PruebaContext from './pruebas/Context';
import Navigator from './Routes'




function App() {
  const Hola = 'hola';
  const [monja, setMonja] = useState();
  const setMonjaFunc = monjaData => {
    setMonja(monjaData);
  };

  return (
    <PruebaContext.Provider value={{ Hola, monja, setMonjaFunc }}>
      <Navigator />
    </PruebaContext.Provider>
  );
}

export default hot(module)(App);

import React，{useState}来自“React”；
从'react hot loader'导入{hot}；
从“/pruebas/Context”导入PruebaContext；
从“./Routes”导入导航器
函数App（）{
常数Hola='Hola'；
const[monja，setMonja]=useState（）；
const setMonjaFunc=monjaData=>{
setMonja（monjaData）；
};
返回(
);
}
导出默认热（模块）（App）；

下面是Routes.js上的问题：

 import React from 'react'
import {Router, Route, Switch, } from 'react-router-dom';
import history from './pruebas/History';
import Second from './components/Second';
import Home from './components/Home';
import Third from './components/Third'


const Navigator = () => {

  return(
      <Router history={history}>
        <Switch>
          <Route  path='/Second' component={Second}/>
          <Route  path='/Third' component={Third} />
          <Route  path='/'  component={Home}/>
        </Switch>
      </Router>
  )
}

export default Navigator;

从“React”导入React
从“react Router dom”导入{Router，Route，Switch，}；
从“/pruebas/history”导入历史记录；
从“./components/Second”导入秒；
从“./components/Home”导入Home；
从“./components/Third”导入第三个
常量导航器=（）=>{
返回(
)
}
导出默认导航器；

和Home.js：

import React, { useEffect, useContext } from 'react';
import styles from './Home.css';
import PruebaContext from '../pruebas/Context';
import { Link, useHistory } from 'react-router-dom';
import Counter from './Counter';

const Home = () => {
  const Context = useContext(PruebaContext);
  const history = useHistory();

  useEffect(() => {
    console.log(Context.Hola);
    Context.setMonjaFunc('adios');

  }, []);
  const DoSomething = () => {
    console.log('do');
    Context.setMonjaFunc('1');
  };
  const DoSomethingTwo = () => {
    console.log('2');
    Context.setMonjaFunc('2');
  };
  //NAVIGATION 1ST TRY
  const Nav = () => {
    history.push('/Third')
  }

  return (
    <div className={styles.container} data-tid="container">
      <button type="button" onClick={DoSomethingTwo}>2Bum</button>
      <button type="button" onClick={DoSomething}>bum</button>
      <button type="button" onClick={Nav}> n</button>
      <h2>Home</h2>
      <h2>{Context.Hola}</h2>
      <h2>{Context.monja}</h2>
      {/* NAVIGATION 2ND TRY */}
      <Link to='/Second' >Go to second</Link>
    </div>
  );
};

export default Home;

import React，{useffect，useContext}来自“React”；
从“/Home.css”导入样式；
从“../pruebas/Context”导入PruebaContext；
从“react router dom”导入{Link，useHistory}；
从“./Counter”导入计数器；
常量Home=（）=>{
const Context=useContext（PruebaContext）；
const history=useHistory（）；
useffect（（）=>{
log（Context.Hola）；
Context.setMonjaFunc（'adios'）；
}, []);
常数DoSomething=（）=>{
console.log（'do'）；
Context.setMonjaFunc（'1'）；
};
常数DoSomethingTwo=（）=>{
console.log（'2'）；
Context.setMonjaFunc（'2'）；
};
//导航第一次尝试
常量导航=（）=>{
history.push（“/Third”）
}
返回(
20微米
流浪汉
N
家
{Context.Hola}
{Context.monja}
{/*导航第二次尝试*/}
第二名
);
};
导出默认主页；

您说过您已经尝试使用exact，您能告诉我们如何使用吗？在我看来，这应该行得通。那你把它搬到第一个地方了吗？这个答案很好地解释了这一点：@Morishiri是的，第一期，添加这个，无法呈现页面。第二个问题，（不使用精确的）导航只有在其他页面后面定义了Home组件时才起作用，正如您在Routes.js中看到的那样。我真的猜问题出在主页上，其他页面甚至可以正确地添加或不添加任何内容。@Morishiri edit:尝试将“第二”页作为主页，但得到了相同的问题这解决了我的问题！谢谢