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属性添加到路由元素

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>
    );
  }
}

如何通过React Router创建独立页面？

3 个答案: