Question

我叫Rajdeep Singh。我在我的react项目中使用react-router-dom。当点击链接标签时，链接标签不起作用。我不明白为什么不起作用。浏览器内更改URL只是一个组件，而不是在Web应用程序上更改

检查我的代码 这是我的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

这是我的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

请告诉我我的错误感谢您的帮助

Answer 1

您应该只启动一次BrowserRouter。我会在您的组件树的更高级别上执行此操作。您可以看一下这个例子。

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

信用至：siakaramalegos

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

1 个答案: