React-router v4，URL 更改但组件不呈现 [英] React-router v4, URL changing but component doesn't render

问题描述

我已经尝试了所有方法，但在 URL 更改时无法呈现组件.没有任何错误消息，react-redux 已安装但尚未使用，所以这不是问题.当我从 Google chrome React 开发工具检查它时，没有任何反应，没有匹配，历史与任何东西.我找不到解决方案，有什么办法让它起作用吗?

解决方案

我假设您需要将 Route 组件直接放入 Switch 并且不要忘记在 Layout 中渲染 children.所以试试这个:

app.js:

class App 扩展组件 {使成为() {返回 (<div><浏览器路由器><布局><开关><Route path="/auth" component={Auth}/><Route path="/" 精确组件={SearchBox}/></开关></布局></BrowserRouter>

);}}

Layout.js

render() {//...返回 (<div><导航栏/>{ this.props.children }//<-- 你的路由特定组件

)}

I've tried everything but fail to render component when URL changes. No error messages nothing, react-redux is installed but not using it yet, so it can't be the problem. When I check it from to Google chrome React dev tools, nothing happens, there is no match, history vs anything. I couldn't find a solution, is there any way to make it work?

https://codesandbox.io/s/vm3x9n4k67

Here is my NavBar.js. I import NavLink from react-router-dom and implement these

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

this is my Layout.js render property:

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

and finally 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);

解决方案

I assume that you need to put your Route components directly into Switch and don't forget to render children in Layout. So try this:

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

Layout.js

render() {
  // ...

  return (
    <div>
      <NavBar />
      { this.props.children } // <-- your route specific components
    </div>
  )
}

这篇关于React-router v4，URL 更改但组件不呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！