Блог

App.js

 return (
    <div className="App">
      <BrowserRouter>
        <Route path="/" component={Login} />
      </BrowserRouter>
    </div>
  );
 

Login.js

     <BrowserRouter>
    <div className="login-box">
        <div className="login-wrap">
            <form id="login-form" action="#" >
                <input type="text" placeholder="ID"/>
                <input type="password" placeholder="PWD"/>
                <Link to="/Edit">
                <button>Login</button>
                </Link>
                
            </form>
        </div>
    </div>
    <Switch>
    <Route exact={true} path="/Edit" component={Edite}/>
    </Switch>
    </BrowserRouter>
  ); 
 

Я хочу нажать кнопку входа в систему, затем перейти к редактированию страниц, но этот код перекрывает компоненты.
Поэтому я попробовал добавить <Switch> тег exact={true} , но всегда перекрывал компоненты.
Как я могу решить эту проблему? (* Извините, я плохо говорю по-английски.)

Вы не должны использовать <Route> and <BrowserRouter> в каждом файле jsx. используйте их только внутри app.js и <Link> в других компонентах.

В app.js

 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

class App extends React.Component{
  render(){
     return (
    <Router>
      <div className="App">
        {/*if you have nevbar use it on here(out side the Switch)*/}
        <Route path="/" component={Nevbar} />
        
        <Switch>
          <Route path="/" exact component={Login} />
          <Route path="/Edit" exact component={Edite}/>
        </Switch>

         {/*if you have footer use it on here(out side the Switch)*/}
         <Route path="/" component={Footer} />
      </div>
    </Router>
  );
  }
  
}
 

Внутри login.jsx

 <Link to="/Edit"><button>Login</button> </Link>
 

достаточно перейти к нужному компоненту.

 <BrowserRouter>
   <Switch>
    <Route exact={true} path="/Edit" component={Edite}/>
    <Route path="/" exact={true} component={Login} />
   </Switch>
</BrowserRouter>
 

объявляйте свои маршруты в App.js . таким образом, когда вы объявляете это внутри login, уже отображенная страница входа в систему будет сохранена, а редактирование будет отображаться под страницей входа в систему. поэтому, если вы объявите его в App.js мы направляем вас либо на страницу входа в систему, либо на страницу редактирования