Можете ли вы разделить ссылки и маршруты в отдельных файлах JS?

Question

У меня есть файл 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 выглядит так, как будто все должно быть просто, но мне тяжело с кривой обучения.Я не могу заставить вещи работать так, как я хочу.Кто-нибудь знает, как он может быть настроен таким образом, или есть хорошая справка, чтобы уточнить некоторые вещи для меня?

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

надеюсь, это поможет вам.

Answer 2

В приложении, созданном с помощью create-реагировать-приложение (я использую реагирующий ремень, но вы можете удалить его и обойтись без него):

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