反应路由器导航栏示例

Question

我是 React JS 的初学者，想为我的仪表板开发一个基于反应路由器的导航。样机如下：

我为尝试路由而创建的 app.js 代码如下：

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Link } from 'react-router'
import Login from './components/Login.js';

const App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/login">Login</Link></li>
          <li><Link to="/inbox">Inbox</Link></li>
        </ul>
        {this.props.children}
      </div>
    )
  }
})


render((
  <li>
  <Router>
    <Route path="/" component={App}>
      <Route path="login" component={Login} />
    </Route>
  </Router>
  </li>
), document.getElementById('placeholder'))

如何创建模型中显示的导航？

Answer 1

注意 接受的很好 - 但想添加一个版本 4 示例，因为它们足够不同。

Nav.js

  import React from 'react';
  import { Link } from 'react-router';

  export default class Nav extends React.Component {
    render() {    
      return (
        <nav className="Nav">
          <div className="Nav__container">
            <Link to="/" className="Nav__brand">
              <img src="logo.svg" className="Nav__logo" />
            </Link>

            <div className="Nav__right">
              <ul className="Nav__item-wrapper">
                <li className="Nav__item">
                  <Link className="Nav__link" to="/path1">Link 1</Link>
                </li>
                <li className="Nav__item">
                  <Link className="Nav__link" to="/path2">Link 2</Link>
                </li>
                <li className="Nav__item">
                  <Link className="Nav__link" to="/path3">Link 3</Link>
                </li>
              </ul>
            </div>
          </div>
        </nav>
      );
    }
  }

App.js

  import React from 'react';
  import { Link, Switch, Route } from 'react-router';
  import Nav from './nav';
  import Page1 from './page1';
  import Page2 from './page2';
  import Page3 from './page3';

  export default class App extends React.Component {
    render() {    
      return (
        <div className="App">
          <Router>
            <div>
              <Nav />
              <Switch>
                <Route exactly component={Landing} pattern="/" />
                <Route exactly component={Page1} pattern="/path1" />
                <Route exactly component={Page2} pattern="/path2" />
                <Route exactly component={Page3} pattern="/path3" />
                <Route component={Page404} />
              </Switch>
            </div>
          </Router>
        </div>
      );
    }
  }

或者，如果您想要更动态的导航，您可以查看优秀的 v4 文档：https://reacttraining.com/react-router/web/example/sidebar

编辑

有些人询问过没有导航的页面，例如登录页面。我通常使用包装 Route 组件来处理它

  import React from 'react';
  import { Link, Switch, Route } from 'react-router';
  import Nav from './nav';
  import Page1 from './page1';
  import Page2 from './page2';
  import Page3 from './page3';

  const NavRoute = ({exact, path, component: Component}) => (
    <Route exact={exact} path={path} render={(props) => (
      <div>
        <Header/>
        <Component {...props}/>
      </div>
    )}/>
  )

  export default class App extends React.Component {
    render() {    
      return (
        <div className="App">
          <Router>
              <Switch>
                <NavRoute exactly component={Landing} pattern="/" />
                <Route exactly component={Login} pattern="/login" />
                <NavRoute exactly component={Page1} pattern="/path1" />
                <NavRoute exactly component={Page2} pattern="/path2" />
                <NavRoute component={Page404} />
              </Switch>
          </Router>
        </div>
      );
    }
  }

Answer 2

是的，Daniel 是正确的，但要扩展他的答案，您的主要应用程序组件需要在其中包含一个导航栏组件。这样，当您渲染主应用程序（“/”路径下的任何页面）时，它也会显示导航栏。我猜你不希望你的登录页面显示导航栏，所以它不应该是一个嵌套组件，而应该是单独的。所以你的路线最终会看起来像这样：

<Router>
  <Route path="/" component={App}>
    <Route path="page1" component={Page1} />
    <Route path="page2" component={Page2} />
  </Route>
  <Route path="/login" component={Login} />
</Router>

其他组件看起来像这样：

var NavBar = React.createClass({
  render() {
    return (
      <div>
        <ul>
          <a onClick={() => history.push('page1') }>Page 1</a>
          <a onClick={() => history.push('page2') }>Page 2</a>
        </ul>
      </div>
    )
  }
});

var App = React.createClass({
  render() {
    return (
      <div>
        <NavBar />
        <div>Other Content</div>
        {this.props.children}
      </div>
    )
  }
});

Answer 3

React 路由器版本 6+ 2021 带/不带导航栏的路由

import { Outlet, Route, Routes } from "react-router-dom";
// your components here 

const App = () => {
  
  return (
    <>
      <Routes>
        {/* Routes that needs a navbar will need to go as children of this Route component */}
        <Route path="/" element={<LayoutsWithNavbar />}>
          <Route path="/" element={<div>Home screen</div>} />
          <Route path="/welcome" element={<Welcome />} />
          <Route path="/something" element={<Somethinggg />} />
          <Route path="/somethingProtected" element={<YourCustomProtectedRoute component={Someone}/>} />
          <Route path="/something/:id" element={<ProtectedRoute id component={SomethingById}/>} />
        </Route>

        {/* Routes without a navbar you can add them here as normal routes */}
        <Route
          path="/idontneednavbar"
          element={<ProtectedRoute component={ProviderRegistrationInfo} />}
        />
      </Routes>
    </>
  );

  function LayoutsWithNavbar() {
    return (
      <>
        {/* Your navbar component */}
        <Navbar />
  
        {/* This Outlet is the place in which react-router will render your components that you need with the navbar */}
        <Outlet /> 
        
        {/* You can add a footer to get fancy in here :) */}
      </>
    );
  }
  

工作原理

LayoutsWithNavbar 组件将使用导航栏所需的任何组件呈现导航栏。您可以在此处的官方 react-router v6 文档中找到示例：https://reactrouter.com/docs/en/v6/getting-started/overview#nested-routes

详细了解Outlet 组件：https://reactrouter.com/docs/en/v6/getting-started/concepts#outlets

Answer 4

@Chris 的回答是在 功能组件 中工作。这是答案 React-router、router-dom 版本 v5.2.0

  import React from 'react';
  import { Link, Switch, Route } from 'react-router-dom';
  import Header from './header';
  import Footer from '.footer';
  import Page1 from './page1';
  import Page2 from './page2';
  import Page3 from './page3';
  import Loading from './Loading'; // a page to show spinner 

const Dashboard = React.lazy(() => import('../pages/Dashboard'));
// if you have an admin dashboard to load lazily

  const NavRoute = ({exact, path, component: Component}) => (
    <Route exact={exact} path={path} render={(props) => (
      <div>
        <Header/>
        <Component {...props}/>
        <Footer/>
      </div>
    )}/>
  )

  function App() {   
      return (
        <div>
          <Suspense fallback={<Loading />}>
              <Switch>
                <NavRoute exact path="/" component={Landing}  />
                <Route exact path="/admin/dashboard" component={Dashboard}/>
                <Route exact path="/" component={Login} />
                <NavRoute exact path="/path1" component={Page1} />
                <NavRoute exact path="/path2" component={Page2} />
                <NavRoute component={Page404} />
              </Switch>
          </Suspense>
        </div>
      );
  }

export default App;