Question

我正在学习react-router v4，并且遇到了：id-path问题。刷新浏览器或手动输入地址时，我的道具丢失，应用程序崩溃。我的学习资料不能解决问题，该如何解决？

这是我的store.js

import { createStore, combineReducers, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'
import notificationReducer from './reducers/notificationReducer'
import userReducer from './reducers/userReducer'
import blogReducer from './reducers/blogReducer'
import loginReducer from './reducers/loginReducer'
import visibilityReducer from './reducers/visibilityReducer'

const reducer = combineReducers({
    notification: notificationReducer,
    loggedUser: loginReducer,
    users: userReducer,
    blogs: blogReducer,
    visibility: visibilityReducer
})

const store = createStore(
  reducer,
  composeWithDevTools(
      applyMiddleware(thunk)
    )
)

export default store

这是我的index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './store'
import { Provider } from 'react-redux'
import './style.css'

  const render = () => {
    ReactDOM.render(
    <Provider store={store}>
      <App/>
    </Provider>
    , document.getElementById('root'))
  }

render()
store.subscribe(render)

这是我的App.js

import React from 'react'
import blogService from './services/blogs'
import './style.css'
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom'
import SingleUser from './components/SingleUser'
import SingleBlog from './components/SingleBlog'
import LoginForm from './components/loginForm'
import AddBlogForm from './components/AddBlogForm'
import BlogList from './components/BlogList'
import Bar from './components/Bar'
import { blogInitialization } from './reducers/blogReducer'
import { userInitialization } from './reducers/userReducer'
import { loginCreator } from './reducers/loginReducer'
import { allReadyLogged } from './reducers/loginReducer'
import { notify } from './reducers/notificationReducer'
import { connect } from 'react-redux'
import UsersList from './components/UsersList';


class App extends React.Component {

  componentWillMount() {
    const loggedUserJSON = window.localStorage.getItem('loggedBlogUser')
    if (loggedUserJSON) {
      const loggedUser = JSON.parse(loggedUserJSON)
      blogService.setToken(loggedUser.token)
      this.props.allReadyLogged(loggedUser)
      this.props.userInitialization()
      this.props.blogInitialization()
    }
  }   

  render() {
    return (
      <div className="container">
        <Router>
          <div>
            <Route path="/" render = { (props) => this.props.loggedUser ? <Bar {...props}/> : null } />
            <Route exact path="/login" render={ (props) => this.props.loggedUser ? <Redirect to='/users' /> : <LoginForm {...props}/> } />
            <Route exact path="/users" render={ (props) => <UsersList {...props} /> } />
            <Route exact path="/blogs" render={ (props) => <BlogList {...props} /> } />
            <Route path="/users/:id" render={ (props) => <SingleUser {...props} /> } />
            <Route path="/blogs/:id" render={ (props) => <SingleBlog {...props} /> } />
            <Route path = "/" render = { (props) => <AddBlogForm {...props} /> } />
          </div>
        </Router>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return{
    notification: state.notification,
    loggedUser: state.loggedUser,
    users: state.users,
    blogs: state.blogs
  }
}

const mapDispatchToProps = {
  userInitialization,
  blogInitialization,
  allReadyLogged,
  loginCreator,
  notify
}

export default connect( mapStateToProps, mapDispatchToProps )(App)

这是我的UsersList.js

class UsersList extends React.Component {

render(){
  return(
    <table className="taulu">
      <tbody>
        <tr><th>Users</th><th>blogs added</th></tr>
        {this.props.users.map( user =>
          <tr key={user.id}><td><Link to={`/users/${user.id}`} id='link'>{user.username}</Link></td><td>{user.blogs.length}</td></tr>
        )}
      </tbody>
    </table>
  )
}
}

const mapStateToProps = (state) => {
  return{
    users: state.users
  }
}

export default connect( mapStateToProps, null )(UsersList)

这是：id-path后面的SingleUser.js，无法刷新。

import React from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'

class SingleUser extends React.Component {

  render() {
    return (
      <div>
        <h2>{this.props.user.username}</h2>
        <h3>Added blogs</h3>
        <ul>
            {this.props.user.blogs.map(blog => <li key={blog._id}><Link to={`/blogs/${blog._id}`} id='link'>{blog.title}</Link></li>)}
        </ul>
      </div> 
      )
    }
  }

  const mapStateToProps = (state, ownProps) => {
    return{
      user: state.users.find(u => u.id === ownProps.match.params.id)
    }
  }

  export default connect( mapStateToProps, null )(SingleUser)

刷新浏览器时如何使react-router v4：id-path工作？

0 个答案: