Question

React路由器v4正在重定向到大约页面，但没有将主页内容与主页内容呈现在同一主页上，但随后网址发生了变化

例如：

localhost：3000 //如果要点击

，请从此处开始应用页面

localhost：3000 /关于//关于页面内容属于应用页面

关注索引应用程序代码和js

index.js

 import { BrowserRouter,Route,Switch,Redirect } from 'react-router-dom'
 import App from './App';
 ReactDOM.render(
( <BrowserRouter>
    <Switch>
       <Route path="/" component={App}/>            
       <Redirect for="*" to="/" />
    </Switch>       
 </BrowserRouter>)
, document.getElementById('root'));

app.js

        import React, { Component } from 'react';
        import About from './About';
        import {Route,Link} from 'react-router-dom'

        class App extends Component {
          constructor(props)
          {
              super(props);
              this.state=({name:"",
                           age:"",
                           button_flag:0                   
                          })
          }
          sample(){
              this.setState({button_flag:1});
          }

          onchangeevent(name,event)
          {
              this.setState({button_flag:0});
              var change = {};
              change[name] = event.target.value;
              this.setState(change);
          }


          render() {
            return (
              <div className="">
                <div className="">
                 <input type="text" value={this.state.name} name="name" onChange={this.onchangeevent.bind(this,"name")}/>
                 <input type="text" value={this.state.age} name="age" onChange={this.onchangeevent.bind(this,"age")}/>
                 {this.state.button_flag === 1 && 
                   <div>
                    <h3>{this.state.name} : {this.state.age}</h3>             
                   </div>
                   }
                </div>
                <p className="">
                  <button onClick={this.sample.bind(this)}>test</button>


                  <Link to="About">About</Link>
                </p>

                            <Route path="About" component={About}/>

              </div>
            );
          }
        }

        export default App;

关于

    import React,{Component} from 'react';      
    class About extends Component{              
            render(){
                return(
                  <div>   <p> hi  </p>   </div>
                );
              }                             
            }
        export default About;

Answer 1

您的路线配置应该是这样的。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import promise from 'redux-promise';

import reducers from './reducers';
import App from './App';
import AboutComponent from './components/AboutComponent';

const createStoreWithMiddleware = applyMiddleware(promise)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <BrowserRouter>
      <div>
        <Switch>
            <Route path="/about" component={AboutComponent} />
            <Route path="/" component={App} />
        </Switch>
      </div>
    </BrowserRouter>
  </Provider>
  , document.querySelector('.container'));

然后将你的Link路线激活到哪里，

<Link to={`about`}>
  About
</Link>

希望这会有所帮助。快乐的编码！

React不呈现重定向页面内容

1 个答案: