मैंने सब कुछ करने की कोशिश की है, लेकिन जब यूआरएल बदलता है तो घटक प्रस्तुत करने में विफल रहता है। कोई त्रुटि संदेश कुछ भी नहीं, प्रतिक्रिया-रेडक्स स्थापित है लेकिन अभी तक इसका उपयोग नहीं कर रहा है, इसलिए यह समस्या नहीं हो सकती है। जब मैं इसे Google क्रोम रिएक्ट देव टूल्स से चेक करता हूं, तो कुछ नहीं होता है, कोई मेल नहीं है, इतिहास बनाम कुछ भी नहीं है। मुझे कोई समाधान नहीं मिला, क्या इसे काम करने का कोई तरीका है?

https://codesandbox.io/s/vm3x9n4k67

यह रहा मेरा NavBar.js। मैं रिएक्ट-राउटर-डोम से NavLink आयात करता हूं और इन्हें लागू करता हूं

import React from 'react'
import classes from "./NavBar.css";
import { NavLink } from 'react-router-dom';


const NavBar = (props) => {
    return (
    <div className={classes.NavBar}>
        <h1 className={classes.NavBar_list} >foodbase</h1>
        <ul className={classes.NavBar_list}>

            <NavLink to="/auth"> <li className={classes.NavBar_list_item}>Signin</li></NavLink>
            <NavLink to="/"><li className={classes.NavBar_list_item}>Main Page</li></NavLink>

        </ul>
    </div>
  )
}

export default NavBar

यह मेरा लेआउट है। जेएस संपत्ति प्रस्तुत करता है:

 render() {
          let recipes = [];
          if (this.state.recipes.length > 0) {
          recipes = this.state.recipes;
    }

    return (

        <div>
            <NavBar/>
            <SearchBox
                onChangeHandler={this.onChangeHandler}
                value={this.state.inputValue}
                onSearchClick={this.onClickedHandler} />
            <section className={classes.SearchSection}>
                <ul className={classes.SearchResultArea}>
                    <SearchResults
                        Results={recipes}
                    ></SearchResults>
                </ul>
            </section>

        </div>
    )
}

और अंत में app.js:

import React, { Component } from 'react';
import { Switch, Route, BrowserRouter, withRouter } from 'react-router-dom';
import Auth from './components/Auth/Auth';
import SearchBox from './components/SearchBox/SearchBox';
import Layout from './containers/Layout/Layout';
import './App.css';



class App extends Component {
  render() {

  return (
  <div>
    <BrowserRouter>
      <Switch>
        <Layout>
          <Route path="/auth" component={Auth} />
          <Route path="/" exact component={SearchBox} />
        </Layout>
      </Switch>
    </BrowserRouter>
    </div>
    );
  }
}

export default withRouter(App);

when clicked Signin

Main Page

4
user7557524 23 सितंबर 2018, 19:48

1 उत्तर

सबसे बढ़िया उत्तर

मुझे लगता है कि आपको अपने Route घटकों को सीधे Switch में डालने की आवश्यकता है और Layout में children रेंडर करना न भूलें। तो इसे आजमाएं:

app.js:

class App extends Component {
  render() {

  return (
  <div>
    <BrowserRouter>
      <Layout>
        <Switch>
          <Route path="/auth" component={Auth} />
          <Route path="/" exact component={SearchBox} />
        </Switch>
      </Layout>
    </BrowserRouter>
    </div>
    );
  }
}

लेआउट.जेएस

render() {
  // ...

  return (
    <div>
      <NavBar />
      { this.props.children } // <-- your route specific components
    </div>
  )
}
4
streletss 23 सितंबर 2018, 20:07