如何通過React Router創建獨立頁面？

Question

我從Angular框架來到React，我對路由器庫感到困惑。 我試圖在我的應用程序中將登錄頁面創建為單獨的頁面，該頁面應包含導航和頁腳（這是Main的一部分）。

我添加了此代碼來解決它，但是遇到了麻煩。

//index.js

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

import './index.css';

import App from './App';
import Login from './containers/Login';

ReactDOM.render(
  <BrowserRouter>
    <Route path="/">
      <App />
    </Route>

    <Route path="/login">
      <Login />
    </Route>
  </BrowserRouter>
, document.getElementById('root'));

//app.js
class App extends React.Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Navbar />

          <Switch>
            <Route path="/">
              <Redirect to="/dashboard" />
            </Route>

            <Route path="/dashboard">
              <Dashboard />
            </Route>

            <Route path="/admin">
              <Admin />
            </Route>
          </Switch>

          <Footer />
        </div>
      </Router>
    );
  }
}

我正在使用react-router-dom庫。

因此，主要思想是我希望在不使用Navbar和Footer的情況下加載/ login頁面，但是對於我的應用中的其他頁面（例如Admin，Dashboard），我希望它們使用Navbar和Footer進行加載（我不想在這里使用條件渲染）。

但是現在當我進入/ login頁面時，我看到了Navbar和Footer，也無法進入儀表板。

Answer 1

將exact屬性添加到route元素

Answer 2

以我的經驗，最好的做法是將帶有xact道具的根路徑（'/'）放在NotFoundPage之前的后面的路線上。 我認為它與Angular路由器相同。

Answer 3

請嘗試這個。

 //index.js import React from 'react'; import ReactDOM from 'react-dom'; import {BrowserRouter, Route, Switch} from 'react-router-dom'; import './index.css'; import App from './App'; import Login from './containers/Login'; ReactDOM.render( <BrowserRouter> <Switch> <Route path="/login"> <Login /> </Route> <Route path="/"> <App /> </Route> </Switch> </BrowserRouter> , document.getElementById('root')); 

 //app.js class App extends React.Component { render() { return ( <Router> <div className="App"> <Navbar /> <Switch> <Route path="/dashboard"> <Dashboard /> </Route> <Route path="/admin"> <Admin /> </Route> <Route exact path="/"> <Redirect to="/dashboard" /> </Route> </Switch> <Footer /> </div> </Router> ); } }