你可以在单独的 JS 文件中分离链接和路由吗？答案

【问题标题】：Can you separate Links and Routes in separate JS files?你可以在单独的 JS 文件中分离链接和路由吗？
【发布时间】：2018-05-20 03:50:24
【问题描述】：

我有一个 Nav.js 文件和一个 App.js 文件

Nav.js -

import { Link, Router } from 'react-router-dom'
render() {
    return (
        <Router>
            <ul className="nav-list">
                <li><Link to="/">Home<Link></li>
                <li><Link to="/about">About</Link></li>
                <li><Link to="/contact">Contact</Link></li>
            </ul>
        </Router>
    )
}

App.js -

import Nav from './nav.js'
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"
render() {
    return (
        <Nav />
        <Router>
            <Switch>
                <Route exact path="/" />
                <Route exact path="/about" />
                <Route exact path="/contact" />
            </Switch>
        </Router>
    )
}

由于某种原因这不起作用，但我觉得它应该基于 react-router-dom 文档。 React Router 看起来应该很简单，但我很难适应学习曲线。我真的无法让事情按照我想要的方式工作。有谁知道如何以这种方式设置它或有一个很好的参考来为我澄清一些事情？

【问题讨论】：

标签： javascript node.js reactjs react-router single-page-application

【解决方案1】：

您可以在两个文件中解决此问题但是在相同的 BrowserRouter 标记中，您在给定的示例中错过了这一点。应该是，

import Nav from './nav.js'
import { BrowserRouter, Route, Switch } from "react-router-dom"
render() {
    return (
        <BrowserRouter>
            <Nav />
            <Switch>
                <Route exact path="/" />
                <Route exact path="/about" />
                <Route exact path="/contact" />
            </Switch>
        </BrowserRouter>
    )
}

希望这会对你有所帮助。

【讨论】：

【解决方案2】：

在由 create-react-app 创建的应用程序中（我使用的是 reactstrap，但您可以删除它并不使用它）：

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Nav from './components/Navigation';        // top (fixed) navigation
import Footer from './components/Footer';  // bottom (fixed) footer
import Home from './components/Home';  
import One from './components/One';        
import Two from './components/Two';

...

ReactDOM.render(
  <Provider store={store}>
    <div>
      <BrowserRouter>
          <div>
            <Route path="/" component={Navigation} />
            <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/one" component={One} />
              <Route path="/two" component={Two} />
          </Switch>
          <Footer />
      </BrowserRouter>
    </div>
  </Provider>
  , document.querySelector('#root'));

导航.js：

import React from 'react';
import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';
import { Link } from 'react-router-dom';

class Navigation extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false
    };
  }

  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }

render() {
    return (
      <div>
        <Navbar color="faded" light expand="md">
          <NavbarBrand tag={Link} to="/">
            <img src="/assets/images/book_lover.png" alt="book-lover!" />
          </NavbarBrand>

            <Nav className="ml-auto" navbar>
              <NavItem>
                <NavLink tag={Link} to="#">
                </NavLink>
              </NavItem>
            </Nav>

        <NavbarToggler onClick={this.toggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="ml-auto" navbar>
              {this.props.loginEmail && <NavItem>
                <NavLink tag={Link} to="/cats">Book-Categories</NavLink>
              </NavItem>}
              <NavItem>
                <NavLink tag={Link} to="/howto">How-To-Use-This-Site</NavLink>
              </NavItem>
              <NavItem>
                <NavLink tag={Link} to="/about">About</NavLink>
              </NavItem>
            </Nav>
          </Collapse>
        </Navbar>
        <hr />
      </div>
    );
  }

【讨论】：