反应路由器 dom 库不适用于我的项目

Question

my name Rajdeep Singh.我的名字是拉杰迪普·辛格。 I'm using react-router-dom in my react project.我在我的反应项目中使用 react-router-dom 。 when clicking on the Link tag, Link tag not work.im don't understand why not working.单击链接标签时，链接标签不起作用。我不明白为什么不起作用。 in-browser change URL but a component, not change on the web app在浏览器中更改 URL 而是一个组件，在 web 应用程序上没有更改

check my code This my Main.js Component file code检查我的代码这是我的 Main.js 组件文件代码

import React, { Fragment } from 'react';
import Foot from './Footer';
import Head from './Header'
import MainContect from './MainContect';
import About from './page/About';
import Book from './page/Book'
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";


function Main() {
    return (

        //  use Fragment
        <Fragment>

            {/* use BrowserRouter as Router */}
            <Router>

                {/* out Router use Head componet */}
                <Head />


                {/* use Switch tag */}
                <Switch>

                    {/* use Route defined  Router  path */}

                    <Route path="/" exact >

                        {/* compnent name */}
                        <MainContect />

                    </Route>

                    <Route path="/book" >

                        <Book />

                    </Route>
                    <Route path="/about"    >
                        <About />
                    </Route>
                </Switch>

                {/*  out Router use Head componet */}
                <Foot />
            </Router>

        </Fragment>

    )
}
export default Main

This my Header.js component file code这是我的 Header.js 组件文件代码

import React from 'react';
import './css/header.scss';

import { BrowserRouter as Router, Link } from 'react-router-dom';


function Head() {
  return (
    //    Use Router tag wrap all Link in Router 
    <Router>
      <header>
        <h1 className='logo'> Sikh Book</h1>
        <div className="iconArea">+</div>
        <ul className="ulArea">


          <li>
             {/*  Use Link tag for navigation */}
            <Link to="/"> Home </Link> </li>
          <li>
            <Link to="/book">
              Book
        </Link>
          </li>

          <li>
            <Link to="/about">
              About
        </Link>
          </li>


        </ul>
      </header>
    </Router>

  )
}
export default Head

Plz tell whats my mistake thank for helping me请告诉我的错误谢谢你帮助我

Answer 1

You should initiate the BrowserRouter only once.您应该只启动一次 BrowserRouter。 I'd do this at a high level of your component tree.我会在您的组件树的较高级别执行此操作。 You could look at this example.你可以看看这个例子。

// BrowserRouter is the router implementation for HTML5 browsers (vs Native).
// Link is your replacement for anchor tags.
// Route is the conditionally shown component based on matching a path to a URL.
// Switch returns only the first matching route rather than all matching routes.
import {
  BrowserRouter as Router,
  Link,
  Route,
  Switch,
} from 'react-router-dom';
import React from 'react';

const Home = () => <h1>Home</h1>;
const About = () => <h1>About</h1>;

// We give each route either a target `component`, or we can send functions in `render` or `children` 
// that return valid nodes. `children` always returns the given node whether there is a match or not.
const App = () => (
  <Router>
    <div>
      <Link to="/">Home</Link>{' '}
      <Link to={{pathname: '/about'}}>About</Link>{' '}
      <Link to="/contact">Contact</Link>

      <Switch>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route
          path="/contact"
          render={() => <h1>Contact Us</h1>} />
        <Route path="/blog" children={({match}) => (
          <li className={match ? 'active' : ''}>
            <Link to="/blog">Blog</Link>
          </li>)} />
        <Route render={() => <h1>Page not found</h1>} />
      </Switch>
    </div>
  </Router>
);

Credits to: siakaramalegos致谢： siakaramalegos

反应路由器 dom 库不适用于我的项目

问题描述

1 个解决方案

解决方案1
1 2019-11-13 08:47:57

反应路由器 dom 库不适用于我的项目

问题描述

1 个解决方案

解决方案1 1 2019-11-13 08:47:57

解决方案1
1 2019-11-13 08:47:57