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

Posted 2023-02-02

我正在学习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)